网站如何添加统计代码是什么意思,想做一个网站平台怎么做的,宝塔 伪静态 wordpress,铜仁市住房和城乡建设局网站本篇文章讲述使用Vue自定义指令#xff0c;并在项目中完成相应功能。
在平常Vue脚手架项目中#xff0c;使用到 自定义指令较少#xff0c;一般都是使用的自带指令#xff0c;比如 v-show 、v-if 、 v-for 、 v-bind 之类的。这些已经能够满足大多数项目使用。更多的可能也…本篇文章讲述使用Vue自定义指令并在项目中完成相应功能。
在平常Vue脚手架项目中使用到 自定义指令较少一般都是使用的自带指令比如 v-show 、v-if 、 v-for 、 v-bind 之类的。这些已经能够满足大多数项目使用。更多的可能也是使用一下过滤器。但是最近开发一个功能时发现必须使用自定义指令而且感觉非常不错。下面讲介绍一下。
首先先回顾一下Vue自定义指令的API和使用方法。下面就是简单的实现一个 v-focus 指令方法用于聚焦元素。 全局注册了之后就可以在项目页面中去使用它如下所示
input v-focus
那么现在就可以使得 input 标签自动聚焦。原理也是比较简单的就是自定义指令中拿到当前的挂载元素然后进行js的聚焦操作。 简单了解了之后我们来看一下今天要实现的功能。我们原有一个表单详情页如下所示。 现在需要增加比对功能也就是说左右两个相同表单比对它们信息不同并且有不同的行用底色标出来。这种功能在有多版本需求是比较常见的用户每次更改保存了表单那么就生成 一个版本记录他可以回头来看或者对比当前和之前的版本更改差异。 那么现在的思路是先拿到对比差异数据并且把差异化的数据对应的元素样式加上。那么一般做法如果是表单比较小或者数据量小的话图省事基本都是当前的vue界面里面直接数据进行比对然后设置变量进行界面差异底色展示。
这样的做法不是很通用而且会造成代码冗余不易扩展。
所以我采用了自定义指令只要在需要比对的标签上写上指令就可以了。如下三步曲 先计算出当前的差异数据用数组进行存储每个标识。比如
const diff: string[] []
service.featch(/api).then(data {if (data.v1.a ! data.v2.a) diff.push(data.v1.a)// ....
})
console.log(diff)
// output
// a,b,c,d.... 2. 注册全局自定义指令进行查找。
Vue.directive(diff, function (el, binding) {if (diff.find(d d binding?.value) el.classList?.contains(diff) false) {el.classList.add(diff)}
})
// 大致含义就是寻找当前需要比对的信息如果找到了且当前元素没有 class diff 那么就给它加上。 .diff {background-color: yellow;
} 3. 在项目中去使用这个标签。
a-forma-form-item v-diffa/a-form-item
/a-form 扩展如果需要比对更多的信息那么只需要将自定义指令进行扩展即可。比如 Vue.directive(diff, function (el, binding) {if (isArray(binding?.value)) {if (diff.find(d binding.value.includes(d)) el.classList?.contains(diff) false) {el.classList.add(diff)}} else {if (diff.find(d d binding?.value) el.classList?.contains(diff) false) {el.classList.add(diff)}}}) 那么就可以在页面中一次比对多个信息。比如
a-forma-form-item v-diff[a, b, c]/a-form-item
/a-form 这样就很方便的给信息差异的元素标上底色了。 自定义指令你学会了吗
