在写vue的项目的时候，弹框经常性出现，并要求点击弹框外面，关闭弹框，那么如何实现呢？且听我一一。。。不了，能实现效果就好<template><div><div class="show" v-show="show" v-clickoutside="handleClose">显示</div></div></template><script> const clickoutside = {// 初始化指令 bind(el, binding, vnode) {function documentHandler(e) {// 这里判断点击的元素是否是本身，是本身，则返回if (el.contains(e.target)) {...
一、概念 通过改变 URL，在不重新请求页面的情况下，更新页面视图。 二、实现方式 更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1.Hash --- 利用 URL 中的hash("#"); 2.利用 History interface 在HTML5中新增的方法。 Vue 中，它是通过 mode 这一参数控制路由的实现模式： const router=new VueRouter({mode:‘history‘,routes:[...] }) 创...
1.html <div class="filter-nav" v-for="(item,index) in filterData.navTab" :key="index" :class="{‘active‘:currentSort==index}" @click="active(index)"><span>{{item.name}}</span><i v-if="item.icon" :class="‘fa fa-‘+item.icon"></i></div>2.在循环的代码那里添加 :class="{‘active‘:currentSort==index}"3.添加样式.active {color: #009eef; }4.初始化数据 data() {return {currentSort:0,}},5.调用方法 meth...
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components：state里面的数据可以方便的映射到组件上 然后渲染组件 Actions：当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互 然后它可以取commit一个mutations 注意：我们也可以在组件中直接commit一个mutations Mutations：是唯一可以修改State的途径 其他任何方式修改都是不...
背景：项目需要，我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库，由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口，可能用的更多的时移动端吧吧，于是就随手写了一个，比较简单吧，但是做过的就会知道也是有一些小小的技巧，记录下吧留作备用。由于不是很难，就不做过多解释了，直接上代码：前端精品教程：百度网盘下载?12345678910111213141516171819202122232425262728293031323334...
前提： SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.html 一、定义公共组件页面 简单的页面效果如下所示：（做的比较粗糙，大致理解页面即可） 1、安装 element-ui（1）简介 一款 ui 框架。使用 element-ui 用于实现页面的绘制。【官网：】https://element.eleme.cn/#/zh-CN 【文档：】https://element.eleme.cn/#/zh-CN/component...
项目搭建 + ??布局实现上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述这篇主要讲解 项目搭建 + 后台??布局实现 ：整体效果后台首页按布局一共包含3个部分: 1、左侧栏部分 2、头部部分 3、内容部分。说明 在整个后台管理系统中，左侧栏和头部部分是应该一直在页面中展示的，所以对于每个页面这两个组件都应该存在,而 内容部分 才是通过router的跳转而跳到不同的组件。下面先把整个项目搭建一下，然后再来...
当用户在没有登录的状态下，只能够访问到系统的登录界面，不管输入的路由是什么，都会跳转到登录界面，当用户登录成功后，就会将登录的信息保存到 sessionStorage中，话不多说，直接上代码：第一步是配置路由：第一个路由是不需要登录就能够进入的路由，第二个是需要登录才能进入的路由{path: ‘/Login‘,name: ‘Login‘,component: Login}, {path: ‘/BackupWizard‘,name: ‘BackupWizard‘,component: BackupWizard,meta: {req...
使用图片选择组件，选取图片后会获取一个file let param = new FormData();param.append("img", e.file, e.file.name); //第一个参数为后端接收的路径，第二个参数为图片选择插件获取的file文件，第三个为图片文件的路径 传给后端即可原文：https://www.cnblogs.com/uimeigui/p/12755190.html
一提到文字上下滚动，我们就会想到用不同的程序去实现，而且页面中有文字滚动会增加这个网页的互动和可信度。1.Js最简单的方法是控制盒子的高度，使不断的重复添加<html><body><head> /**scroll css**/ #scrolldiv{height: 400px;overflow: hidden;} </head><div id="scrolldiv" class="scroll"><ul id="scroll1"><li>用户130****0834 刚刚 砸中<span class="yellow">500元京东卡</span> 正在兑换中</li><li>用户176****2746 ...
第六节 地址列表过滤和展开所有的地址html：<li v-for="(item,index) in filterAddress">js：new Vue({ el:‘.container‘, data:{ limitNum:3, addressList:[], }, mounted:function () { this.$nextTick(function () { this.getAddressList(); }); }, computed:{ filterAddress:function () { return this.addressList.slice(0,this.limitNum); /*re...
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理,方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数,Object.defineproperty(obj,‘val‘,attrObject), 参数1: obj是属性所在的对象,参数2: ‘val‘,属性名,它是一个string类型,参数3: {}属性所描述的对象详情可以看Object.defineproperty的文档下面直接上demo,html代码: <input type="text" id="inp1"><br>你...
主要思路通过自定义指令，在视图初始化完成后，绑定scroll事件。当scrollTop + clientHeight >= scrollHeight时（此时滚定条到了底部）触发loadMore事件，<template><div v-scroll="loadMore"><!-- 列表数据传递给子组件，loading表示是否正在加载数据，避免在请求时多次触发 --><my-item :lists="lists" :loading="loading" /></div> </template><script> import MyItem from ‘~/components/Item.vue‘ export default {name: ‘...
为了防止机器操作自动提交，我们需要添加滑动校验。实现代码如下： 1.子组件slider.vue<template><div class="drag" ref="dragDiv"><div class="drag_bg"></div><div class="drag_text">{{confirmWords}}</div><div ref="moveDiv" @mousedown="mouseDownFn($event)" :class="{‘handler_ok_bg‘:confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div></div></template><script>expo...
cmd下安装axiosnpm install axios安装好后,会多出node_modules文件夹思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给data里的result,再传给模板里9.html<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>vue</title><link rel="stylesheet" href=""><!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--><scrip...