vue 指令应用多次时，其动态值更新时，update会执行多次

前几天在开发时，心血来潮自己开发了一个v-loading指令，然后就应用到了页面中，我的页面有多处使用了该指令，但是令我EMO的时候也来了，

页面很简单，只有三块区域，基本相同，但是中间有个显示后台结果的div区，我就想着，用指令来整个遮盖效果，所以，三个区域的结果区都有v-loading。

v-loading指令代码如下，重点是update，也恰恰是它给我整emo了，因为，当我给v-loading重新赋值时，指令中的update居然执行了【3次】（发现问题是因为页面没有v-loading了，因为执行时，false,true,false，正好最后一次给我关闭了loading层）。一开始确实也没注意，以为每个指令都是个副本，各执行各的，但实际，如果你不在指令的update中加一层判断的话，那么，使用了多次相同的指令时，它的效果就会不一样了，也就是如下的判断。

指令的update方法中，要加入当前值与之前值的判断（很像watch）

if (binding.oldValue == binding.value) {
return
}

/** v-loading
* @desc 遮罩层loading，接受值类型：Boolean, Object
* @return 无
* @author vic
* @param true/false {Boolean} 打开、关闭loading
* @param { show: pageLoading, icon: true,appendToBody:true } {Object} loading配置，text:显示文字，icon:显示图标,appendToBody:是否为全屏，customClass:自定义样式
* @example v-loading="true"   v-loading="false"   v-loading="{ show: pageLoading, icon: true }"v-loading="{ show: pageLoading, text: '正在加载中...',appendToBody:true }"
* @tip text与icon只能二选一，样式可自定义
*/// loading指令基本设置
const loadingID = 'vi_loading' //div id属性
const loadingClassName = 'vi-loading' //div class属性function createElement(params) {//创建元素var div = document.createElement('div')div.id = loadingID //iddiv.className = `${loadingClassName} ${params.customClass != undefined ? params.customClass : ''}`let innerHTML = `<div class='vi-loading_txt' style=''>加载中...</div>`if (params != undefined) {if (params.text != undefined) {innerHTML = `<div class='vi-loading_txt'>${params.text}</div>`} else if (params.icon != undefined) {innerHTML = `<div class='vi-loading_txt'><span class='vi-loading_icon iconfont icon-jiazaizhong only-rotate-5'></span></div>`}}div.innerHTML = innerHTMLdiv.style.zIndex = getDocumentMaxZIndex()if (params.appendToBody) {//文档中最后加入该divdocument.body.insertBefore(div, document.body.lastChild)} else {// 往父级插入params.insertDom.style.position = 'relative'params.insertDom.insertBefore(div, params.insertDom.lastChild)}
}function removeElement(params) {//清除divvar ele = nullif (params.id != undefined) {ele = document.getElementById(loadingID)if (ele != null) {ele.remove()}ele = document.getElementsByClassName(loadingClassName)if (ele.length != 0) {ele.remove()}}
}function getDocumentMaxZIndex() {//获取文档元素的最大z-indexlet arr = [...document.all].map((e) => +window.getComputedStyle(e).zIndex || 0)return arr.length ? Math.max(...arr) + 1 : 0
}function getParams(el, binding, vnode, valueType) {if (valueType == 'object') {return {insertDom: el,appendToBody:binding.value.appendToBody != undefined? binding.value.appendToBody: false,text: binding.value.text,icon: binding.value.icon,customClass:binding.value.customClass != undefined? binding.value.customClass: undefined, //自定义class}} else if (valueType == 'boolean') {return {insertDom: el,appendToBody:binding.value.appendToBody != undefined? binding.value.appendToBody: false,text: undefined,icon: true,customClass: undefined,}}
}export default {inserted(el, binding, vnode) {// 第一次进入页面// 判断值类型if (binding.value.constructor.name.toLowerCase() == 'object') {// object类型let params = getParams(el, binding, vnode, 'object')if (binding.value.show == true) {createElement(params)}} else if (binding.value.constructor.name.toLowerCase() == 'boolean') {//布尔类型let params = getParams(el, binding, vnode, 'boolean')if (binding.value == true) {createElement(params)}}},update(el, binding, vnode) {// *** 当指令参数更改时，判断值若与前值不同，则代表使用了当前指令if (binding.oldValue == binding.value) {return}if (binding.value.constructor.name.toLowerCase() == 'object') {// object类型let params = getParams(el, binding, vnode, 'object')if (binding.value.show == true) {createElement(params)} else {//删除LOADING层removeElement({ id: 'vi_loading' })}} else if (binding.value.constructor.name.toLowerCase() == 'boolean') {//布尔类型let params = getParams(el, binding, vnode, 'boolean')if (binding.value == true) {createElement(params)} else {//删除LOADING层removeElement({ id: 'vi_loading' })}}},
}

其实使了那么久的VUE了，确实都没注意到这个问题，而且一直觉得指令也是个副本，但是应用时才能发现问题，所以实践很重要啊，当然我的代码相对来说没有太完美，只是适应自己的项目即可，大神绕行。

vue 指令应用多次时，其动态值更新时，update会执行多次相关推荐

Mysql之乐观锁悲观锁：乐观锁检查数据状态悲观锁更新时锁定数据
1.问题来源就是一数据表的数据在两个人同时修改的时候会出现混乱例子:如一个字段记录status=1 表示可以下单货品只有1个的时候 a下单的同时b也下单 : a有修改status ...
【MATLAB】基本绘图 ( 句柄值 | 对象句柄值获取 | 创建对象时获取句柄值 | 函数获取句柄值 | 获取 / 设置对象属性 | 获取对象属性 )
文章目录一.对象句柄值获取 1.句柄值 2.创建对象时获取句柄值 3.函数获取句柄值 4.获取 / 设置对象属性二.获取对象属性 1.获取线对象属性 2.获取坐标轴对象属性一.对象句柄 ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...
VUE指令大全(详解)
大家好我是迁客,一个初入行的小白!痴迷技术,对programming有着极大的兴趣和爱好.从今天起,开始写自己个人成长的第一篇博客!既是对自己的一个学习技术的一个记录,也是督促自己,坚持下去!加油Fi ...
day1学习vue2笔记 vue指令
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue 指令v-for和v-model
Vue 指令v-for和v-model 上一篇文章中总结了v-bind和v-on指令的用法.这篇文章总结一下v-for和v-model指令的用法. (1)v-for v-for指令可以对数组或者对象或 ...

vue 指令应用多次时，其动态值更新时，update会执行多次

vue 指令应用多次时，其动态值更新时，update会执行多次相关推荐

最新文章

热门文章