Vue中directives的用法

关于 vue 中 directives 的用法问题，详细可以参考vue官方对directives的解释

当前文章主要讲述directives怎么用，directives做权限按钮的功能

###1. directives 怎么用###
不错的示例，可以参考下，点击访问

directives 在生命周期内用

export default {data() {return {     };},directives:{'local-test':function(el,binding,vnode){/** el可以获取当前dom节点，并且进行编译，也可以操作事件 **//** binding指的是一个对象，一般不用 **//** vnode 是 Vue 编译生成的虚拟节点 **/el.style.border="1px solid red";  //操作style所有样式console.log(el.value);  //获取v-model的值console.log(el.dataset.name) //data-name绑定的值，需要el.dataset来获取console.log(vnode.context.$route); //获取当前路由信息}},components:{},filters:{},watch:{}
}

###2. directives 做权限按钮的功能###
directives 在全局main.js中注册

路由配置：

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'] } //页面需要的权限}]

自定义指令：

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {bind: function (el, binding, vnode) {// 获取按钮权限let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");if (!Vue.prototype.$_has(btnPermissions)) {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}/*然后在main.js文件引入文件*/
import has from './public/js/btnPermissions.js';/*页面中按钮只需加v-has即可*/
<el-button @click='editClick' type="primary" v-has>编辑</el-button>

vue中directives的用法相关推荐

vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中watch的用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
vue中props的用法
vue使用props的用法日常编程中都会用到父组件用子组件.子用父的情况,下面先介绍一种子传父的情况 1.在父组件中 (1).首先是在其定义一个list属性以存储其数据值 (2).定义一个绑定属性& ...
vue中@oninput的用法
.vue文件其实是一个组件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用 ...
vue中$root的用法
vue中$root是用来访问根组件的,用法: this.$root.根组件属性代码: main.js: new Vue({data(){return{isUpdate:true //根组件属性}}, ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...
vue中$bus的用法及$emit、$on、$off的使用
vue中 $bus 一般与 $emit. $on. $off 连用,一般用在任意组件间的通信,即 $bus 用来传递非父子关系的数据. 如两个组件之间传递数据: 子组件1 this.$bus.$emi ...

vue中directives的用法

Vue中directives的用法

vue中directives的用法相关推荐

最新文章

热门文章