vue自定义指令-CSDN博客

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

自定义全局指令

在 Vue 实例创建之前通过 Vue.directive(name, definition) 的方式来注册全局指令。其中 name 是指令的名称definition 是一个对象里面包含了指令的具体实现。

例如下面是一个自定义全局指令的例子实现了点击元素时显示元素内容的简单功能

Vue.directive('click-me', {  
  bind: function (el, binding, vnode) {  
    el.addEventListener('click', function () {  
      alert(binding.value,vnode);  
    });  
  }  
});

使用

<template>  
  <div v-click-me="message">点击我</div>  
</template>

也可以把自定义指令单独封装到一个文件里然后在main.js中引入
1、在src下新建一个文件夹directive新建文件v.directive.js(文件名自己起一般是指令名.directive.js)

import Vue from "vue"

Vue.directive('click-me', {  
  bind: function (el, binding, vnode) {  
    el.addEventListener('click', function () {  
      alert(binding.value,vnode);  
    });  
  }  
});

2、在main.js中引入import "@/directive/v.directive.js"
3、在页面中使用

<template>
  <div class="container">
     <a v-click-me="'message'">按钮2</a>
  </div>
</template>

局部注册指令

除此之外还可以局部注册指令

<template>
  <div class="container">
     <a v-auth="'message'">按钮2</a>
  </div>
</template>

export default {
  directives: {
    auth: { 
      bind (el, binding, vnode) {    
          alert(binding.value,vnode);  
      } 
    }  
  },
}

应用场景

做权限验证时我们需要根据用户身份来判定是否显示一些元素的显示比如后台管理只有管理员才能新增角色那么只有用户角色是管理员时新增按钮才会显示这时候就可以使用自定的指令。

自定义指令传入一个字符串比如

把我们获取到的用户的权限信息与字符串做比较

如果不相同将元素的样式设置为display:none

//处理自定义指令的文件
import { useGlobalUserStore } from '@store/UseGlobalStore'
export const AuthDic = {
    name:'add',
    mounted(el,binding){
        let permissions = useGlobalUserStore().permissions;
        let val = binding.value; //'add_add'
        console.log( val,'value' )
        if( !val ) {
            throw '该字段必须传值'
        }

        //判断当前用户是否时超管 这两类用户都是有权限
        if( permissions.includes("*:*:*") ) return
        if( permissions.includes(val) ) return

        //没有权限
        const parent = el.parentElement
        parent && parent.removeChild(el)
    }
}

也可以

export default {
	directives: {
		auth: (el, binding) => {
			if (!getCookie("userName")) {
				el.style.display = "none";//先判断是否登陆没登陆都不显示
			} else {
				let roleName = getCookie("roleName");//用来区分用户角色
				if (roleName === binding.value) {
					el.style.display = "block"; //判断当前用户角色和传入的角色是否相等相等则显示
				} else {
					el.style.display = "none";
				}
			}
		}
	}
}

注上面这种写法是一种简写因为bind和update的方法一致。

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: vue

“vue自定义指令-CSDN博客” 的相关文章

华为 - HCNA 笔记

华为HCNA笔记 # [应用层]() 应用层通过协议产生数据。 OSI 七层模型又称为开放式互联体系参考模型 应用层协议                           (端口号) HTTP 超文本传输协议 ...

系统学习区块链、Solidity 和前后端全栈 Web3 开发

YouTube 系统学习区块链、Solidity 和前后端全栈 Web3 开发 课程相关的资源 GitHubhttps://github.com/smartcontractkit/full-blockchain-solidity-course-js 第1课 - 课程指导 第2课 - 区块链基础知...

作业随笔-指针

指针数组数组指针函数指针二维数组传参函数指针传参函数指针解引用,调用指向函数指针的指针#define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> /* int main() { int arr[5];//arr是一个5个元素的整型数组 i...

UVa 11172 Relational Operator (water ver.)

11172 - Relational OperatorTime limit: 3.000 secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&page...

Python关于面向对象的问题有哪些 - 编程语言

这篇“Python关于面向对象的问题有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python关于面向对象的问题有哪些”文章吧。...

dubbo系列--对使用dubbo的建议

在 Provider 上尽量多配置 Consumer 端属性原因如下:作服务的提供者,比服务使用方更清楚服务性能参数,如调用的超时时间,合理的重试次数,等等在 Provider 配置后,Consumer 不配置则会使用 Provider 的配置值,即 Provider 配置可以作为 Consumer...