码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 自定义指令

时间:2018-02-23 20:47:24      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:后端   body   log   返回   配置   导航栏   页面   自定义指令   时间   

 

 

 

 

 

 

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

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

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

技术分享图片

技术分享图片

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

技术分享图片

技术分享图片

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

技术分享图片

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

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

技术分享图片

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

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

 

技术分享图片

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

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

技术分享图片

 

Vue 自定义指令

标签:后端   body   log   返回   配置   导航栏   页面   自定义指令   时间   

原文地址:https://www.cnblogs.com/mamaguai/p/8462939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!