Vue 自定义指令

Posted mamaguai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 自定义指令相关的知识,希望对你有一定的参考价值。

 

 

 

 

 

 

一、自定指令做菜单级别权限检查  

前段时间有个需求时做后台权限判断,有两个级别,导航栏和每个页面的按钮权限

导航栏我们直接根据后端接口返回的数据渲染导航栏,但是按钮级别当时考虑了两种方案,全局方法和自定义指令。因为考虑到是按钮,没有权限时可直接移除节点,最终采用自定义指令来做。

技术分享图片

技术分享图片

  自定义指令创建完后,全局挂载

技术分享图片

技术分享图片

实际使用:将要比对的参数传进去

技术分享图片

自定义指令钩子里即可根据需求移除节点。

二、自定义指令做输入框唯一性验证,在里踩坑了,起初采用公共组件做,但因输入框失去焦点后,接口检验还没有返回结果,整个表单又因为做了必填验证,还没等到唯一性检查结束,必填验证又提示该项为必填信息,所以改为自定义指令。

技术分享图片

全局挂载方式和上述按钮权限配置一样,因为只唯一性验证,存在新增和编辑,编辑时需要将输入框的初始化数值传进来,输入框失去焦点后,先比对值是否有改变,没有改变则不调用接口去验证。因为在验证改值存在后,我们需求是清空输入框,如果输入框有初始化值不比对时,将每次调用检查都会提示改值已经存在并清空输入框会引发bug。

下图是我的唯一性验证方法,如果改值已存在,我会先提示然后清空该输入框

 

技术分享图片

三、格式化数据,根据需求展示2位或者几位小数

我们默认展示3位小数,可根据不同业务配置

技术分享图片

 

以上是关于Vue 自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

vue3.2 setup 之局部自定义指令

Vue自定义指令

vue3自定义指令详解

【vue】自定义指令限制纯数字或者带小数点输入值

vue 中自定义指令改变data中的值

Vue_(组件)自定义指令