Vue实现自定义指令(directive)及应用场景

简介: Vue实现自定义指令(directive)及应用场景

1.1 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind
    只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted
    被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update
    所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。
  • componentUpdated
    指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind
    只调用一次,指令与元素解绑时调用。
Vue.directive('gqs',{
    bind() {
      // 当指令绑定到 HTML 元素上时触发.**只调用一次**
      console.log('bind triggerd')
    },
    inserted() {
      // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
      console.log('inserted triggerd')
    },
    updated() {
      // 所在组件的`VNode`更新时调用.
      console.log('updated triggerd')
    },
    componentUpdated() {
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      console.log('componentUpdated triggerd')
    },
    unbind() {
      // 只调用一次,指令与元素解绑时调用.
      console.log('unbind triggerd')
    }
  })

1.2 钩子函数参数

指令钩子函数会被传入以下参数:

  • el 指令所绑定的元素,可以用来直接操作 DOM
  • binding 一个对象,包含以下属性:

name:指令名,不包括 v- 前缀。

value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。

oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。

arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。

modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。

  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

1.3 指令简写

当绑定指令的元素的状态发生改变时(这里主要是指元素绑定的vue数据发生改变时),仍然会触发指令中的 update 函数.

那么我们可以利用指令的简写形式,来做一些有意思的事情.

核心思想就是:

当一个HTML元素设置了指令,那么在这个元素的状态发生改变时(由vue数据变化带来的带来的监控),我们可以利用update()钩子函数监控到这个元素的变化,然后根据需要做一些其他的事情.

案例:使用官方指定的指令简写模式:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

当元素的状态发生改变时,就会触发 update

1.4 小结几点

  • 使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
  • Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
  • 在使用指令的HTML元素上,我们需要加上 v-.
<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点"/> 

Vue.directive(‘focus’,{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.

  • el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
  • el 就等价于 document.getElementById(‘el.id’)…
  • 可以利用 $(el) 无缝连接 jQuery

2. vue-cli中定义全局指令

2.1 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.
Vue.directive('my-color',(el) => {
  el.style.color = 'red'
  el.style.backgroundColor = 'yellow'
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.2 相应组件

2020062310470442.png

3. vue-cli中定义局部指令

3.1 相应组件

<template>
  <input type="text" v-model="text" placeholder="仅可填入正整数数字" 
    v-my-text="{key:'text',maxval:'1000'}">
</template>
<script>
export default {
  data(){
    return {
      text:'',
    }
  },
directives:{
    myText:{
      bind(el,binding,vnode) {
        el.handler = function() {
          el.value = el.value.replace(/\D+/g, '')
          //根据设置的规则,进行判断处理
          if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){
            el.value = parseInt(binding.value.maxval);
          }
          //根据指令调取位置设置的规则Key,进行全局上文赋值
          vnode['context'][binding.value.key] = el.value;
        }
        el.addEventListener('input', el.handler)
      },
    },
  }
}
</script>

3.2 简写模式

<template>
  <input type="text" v-model="text" placeholder="仅可填入正整数数字" 
    v-my-text="{key:'text',maxval:'1000'}">
</template>
<script>
export default {
  data(){
    return {
      text:'',
    }
  },
  directives:{
    myText:(el,binding,vnode) => {
      el.handler = function() {
      el.value = el.value.replace(/\D+/g, '')
      //根据设置的规则,进行判断处理
      if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){
        el.value = parseInt(binding.value.maxval);
      }
      //根据指令调取位置设置的规则Key,进行全局上文赋值
      vnode['context'][binding.value.key] = el.value;
      }
      el.addEventListener('input', el.handler)
    },
  }, 
}
</script>

4. 应用场景

传送门:指令在 Element-ui 中选择器(Select)中的使用

4.1 自动获取焦点(官方示例)

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

4.2 一键 Copy的功能

  1. 首先建一个 js 文件(v-copy.js)。定义一个对象。( 指令实际就是一个对象 )
import { Message } from 'ant-design-vue';
const vCopy = { // 名字爱取啥取啥
  /*
    bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置
    el: 作用的 dom 对象
    value: 传给指令的值,也就是我们要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到
    el.handler = () => {
      if (!el.$value) {
      // 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意
        Message.warning('无复制内容');
        return;
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea');
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        Message.success('复制成功');
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件,就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候,移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};
export default vCopy;
  1. 到这里,一键 Copy 的功能就实现了,最后再说一嘴怎么将自定义指令注册到全局:再新建一个 js ( directives.js )文件来注册所有的全局指令。
import copy from './v-copy';
// 自定义指令
const directives = {
  copy,
};
// 这种写法可以批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

3.最后,在 main.js 中这样引入

import Vue from 'vue';
import Directives from './directives';
Vue.use(Directives);

4.3 按钮级别权限控制

权限控制分为页面级别和按钮级别,这两种思路基本是一致的。

页面级别:用户登录后,获取用户role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后,在前端用v-if手动判断来区分不同权限对应的按钮的。。

按钮级别:用户登录后,获取用户role,在前端用 v-if 或者封装一个自定义指令,手动判断来区分不同权限对应的按钮的。

思路:

登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(将token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户角色,用户权限,用户名等等信息)。

权限验证:通过token获取用户对应的role,自定义指令,获取路由meta属性里btnPermissions(注:meta.btnPermissions是存放按钮权限的数组,在路由表里配置),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。

路由配置:

path: '/permission',
component: Layout,
name: '权限测试',
meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
children: [
    {
        path: 'supper',
        component: _import('system/supper'),
        name: '权限测试页',
        meta: { btnPermissions: ['admin','supper'] }  //页面需要的权限
    },
    {
        path: 'normal',
        component: _import('system/normal'),
        name: '权限测试页',
        meta: { btnPermissions: ['admin'] }  //页面需要的权限
    }
]
  1. 自定义指令:
import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
    bind: function (el, binding, vnode) {
        // 获取页面按钮权限
        let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
        if (!Vue.prototype.$_has(btnPermissionsArr)) {
            el.parentNode.removeChild(el);
        }
    }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
    let isExist = false;
    // 获取用户按钮权限
    let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
    if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
        return false;
    }
    if (value.indexOf(btnPermissionsStr) > -1) {
        isExist = true;
    }
    return isExist;
};
export {has}
  1. 在main.js文件引入文件:
import has from './public/js/btnPermissions.js';
  1. 页面中按钮只需加v-has即可:
<el-button @click='editClick' type="primary" v-has>编辑</el-button>

参考文章(侵删)

参考文章(侵删)

参考文章(侵删)




相关文章
|
4天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
60 12
|
4天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
25天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
54 8
|
26天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
71 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
109 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
66 1
vue学习第一章

热门文章

最新文章