手把手教你在 Vue3 中自定义指令

news2025/2/25 8:02:57

TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮;如果用户不具备对应的权限,那么按钮就隐藏起来。大致上就这样一个需求。

看到这个需求,可能有小伙伴首先想到用 v-if 指令,这个指令确实也能做,但是,由于用户具备的权限一般来说可能是多个,甚至可能还有通配符,所以这个比对并不是一个容易的事情,肯定得写方法。。。所以,如果能用一个指令来实现这个功能,那么就会显得专业很多了。

说干就干,我们来看看 Vue3 中如何自定义指令。

1. 成果展示

我们先来看看实现自定义指令最终的使用方式:

<button @click="btnClick" v-hasPermission="['user:delete']">删除用户</button>

小伙伴们看到,这个 v-hasPermission 就是我们的自定义指令,如果当前用户具备 user:delete 权限,这个按钮就会展示出来,如果当前用户不具备这个权限,这个按钮就不会展示出来。

2. 指令基础

先要和小伙伴们说一下,Vue2 和 Vue3 在自定义指令上有一些差异,并不完全一致,下面的介绍主要是针对 Vue3 的介绍。

我先来和小伙伴们分享一下我们具体是怎么做的,然后在讲解代码的时候再来和大家说说各个参数的含义。

2.1 两种作用域

自定义指令可以定义全局的,也可以定义局部的。

在正式开搞之前,小伙伴们需要先明白,自定义指令有两种作用域,一种是局部的自定义指令,还有一种是全局的自定义指令。局部的自定义指令就只能在当前 .vue 文件中使用,全局的则可以在所有的 .vue 文件中使用。

2.1.1 局部指令

直接在当前 .vue 文件中定义即可,如下:

directives: {
  focus: {
    // 指令的定义
    mounted(el) {
      el.focus()
    }
  }
}

不过,在 Vue3 中,也可以这样写:

<template>
    <div>
        <button v-onceClick="10000" @click="btnClick">ClickMe</button>
    </div>
</template>

<script>

    import {ref} from 'vue';

    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick}
        },
        directives: {
            onceClick: {
                mounted(el, binding, vnode) {
                    el.addEventListener('click', () => {
                        if (!el.disabled) {
                            el.disabled = true;
                            setTimeout(() => {
                                el.disabled = false;
                            }, binding.value || 1000);
                        }
                    });
                }
            }
        }
    }
</script>

这里我自定义了一个名叫 onceClick 的指令,给一个 button 按钮加上这个指令之后,可以设置这个 button 按钮在点击多久之后,处于禁用状态,防止用户重复点击。

小伙伴们看,这个指令的执行逻辑其实很简单,el 相当于添加了这个指令的元素,监听该元素的点击事件,如果点击该元素时,该元素不是处于禁用状态,那么就设置该元素为禁用,给一个定时任务,到期后使该元素变为可用。这里边具体的参数,松哥下面会跟大家详细介绍。

不过这只是一个局部指令,只能在当前 .vue 文件中使用,我们也可以定义全局指令,这样就可以在所有的 .vue 文件中使用了。

2.1.2 全局指令

全局指令我们一般写在 main.js 中,或者写一个单独的 js 文件然后在 main.js 中引入,下面的例子是直接写在 main.js 中:

const app = createApp(App);

app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 1000);
            }
        });
    }
})

这样,我们就可以随时随地去使用 v-onceClick 这个指令了。

可能小伙伴感觉比较疑惑,自定义指令时候的 mounted 以及这里的参数都是咋回事,那么接下来松哥就来和大家详细介绍一下这些方法和参数。

2.2 七个钩子函数

在 Vue3 中,自定义指令的钩子函数主要有如下七种(这块跟 Vue2 差异较大):

  • created:在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时,这很有用。

  • beforeMount:当指令第一次绑定到元素并且在挂载父组件之前调用。

  • mounted:在绑定元素的父组件被挂载后调用,大部分自定义指令都写在这里

  • beforeUpdate:在更新包含组件的 VNode 之前调用。

  • updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

  • beforeUnmount:在卸载绑定元素的父组件之前调用

  • unmounted:当指令与元素解除绑定且父组件已卸载时,只调用一次。

虽然钩子函数比较多,看着有点唬人,不过我们日常开发中用的最多的其实是 mounted 函数。

2.3 四个参数

这里七个钩子函数,钩子函数中有回调参数,回调参数有四个,含义基本上和 Vue2 一致:

  • el:指令所绑定的元素,可以用来直接操作 DOM,我们松哥说想实现一个可以自动判断组件显示还是隐藏的指令,那么就可以通过 el 对象来操作 DOM 节点,进而实现组件的隐藏。

  • binding:我们通过自定义指令传递的各种参数,主要存在于这个对象中,该对象属性较多,如下属性是我们日常开发使用较多的几个:

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

    • value:指令的绑定值,例如:v-hasPermission="['user:delete']" 中,绑定值为 'user:delete',不过需要小伙伴们注意的是,这个绑定值可以是数组也可以是普通对象,关键是看你具体绑定的是什么,在 2.1 小节的案例中,我们的 value 就是一个数字。

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

    • arg:传给指令的参数,可选。例如 v-hasPermission:[name]="'zhangsan'" 中,参数为 "name"。

  • vnode:Vue 编译生成的虚拟节点。

  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

2.4 动态参数

有一种动态参数,这里也和小伙伴们分享下。正常情况下,我们自定义指令时传递的参数都是通过 binding.value 来获取到的,不过在这之外还有一种方式就是通过 binding.arg 获取参数。

我举一个简单例子,假设我们上面这个 onceClick 指令,默认的时间单位时毫秒,假设现在想给时间设置单位,那么我们就可以这样写:

const app = createApp(App);

app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                let time = binding.value;
                if (binding.arg == "s") {
                    time = time * 1000;
                }
                setTimeout(() => {
                    el.disabled = false;
                }, time);
            }
        });
    }
})

在自定义指令的时候,获取到 binding.arg 的值,这样就可以知道时间单位了,在使用该指令的时候,方式如下:

<button v-onceClick:[timeUnit]="10" @click="btnClick">ClickMe</button>
<script>

    import {ref} from 'vue';

    export default {
        name: "MyVue01",
        setup() {
            const timeUnit = ref('s');
            return {timeUnit}
        }
    }
</script>

timeUnit 是一个提前定义好的变量。

3. 自定义权限指令

好啦,有了上面的基础知识,接下来就来看我们本文的主题,自定义权限指令,我写一个简单的例子大家来看下:

const usersPermissions = ['user'];

app.directive('hasPermission', {
    mounted(el, binding, vnode) {
        const {value} = binding;
        let f = usersPermissions.some(p => {
            return p.indexOf(value) !== -1;
        });
        if (!f) {
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})

usersPermissions 表示当前用户所具备的权限,正常该数据应该是从服务端加载而来,但是我这里简单起见,就直接定义好了。

具体的逻辑很简单,先从 binding 中提取出 value 的值,这就是当前控件所需要的权限,然后遍历 usersPermissions 用一个 some 函数,去查看 usersPermissions 中是否有满足条件的值,如果没有,说明当前用户不具备展示该组件所需要的权限,那么就要隐藏这个组件,隐藏的方式就是获取到当前组件的父组件,然后从父组件中移除当前组件即可。

这是一个全局的指令,定义好之后,我们就可以在组件中直接使用了:

<button @click="btnClick" v-hasPermission="['user:delete']">删除用户</button>

好啦,Vue3 自定义组件学会了没?

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405608.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序:用户微信登录流程(附:流程图+源码)

目录 前言 一、微信小程序是什么&#xff1f; 二、业务流程 1、使用微信小程序登录的wx.login()方法 2、后端使用登录凭证换取session_key和openid 3、前端处理session_key、openid和token 尾言 前言 随着微信小程序大规模的铺开和宣传&#xff0c;在生活中随处可见微信小程序…

vue2常见面试题

文章目录1、vue 修改数据页面不重新渲染数组/对象的响应式 &#xff0c;vue 里面是怎么处理的&#xff1f;2、生命周期Vue 生命周期都有哪些&#xff1f;父子组件生命周期执行顺序3、watch 和 computed 的区别4、组件通信&#xff08;组件间传值&#xff09;5、$nextTick6、修饰…

【微信小程序】自定义组件(二)

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列文章又更新了呀。 上文我们讲解了微信小程序自定义组件的入门知识&#xff0c;那么今天牛牛就来讲讲自定义组件的进阶知识吧&#xff0c;赶紧拿起小本本做笔记…

vue中三种for循环(含案例分析)

这里写目录标题三种for循环1.普通的for循环2.for in 循环3.for of 循环总结三种for循环 vue中的for循环有三种 :1.普通的for循环 ,2.for in 循环 ,3.for of 循环 它们三个各自有各自的特点和作用&#xff0c;下面我会用一个小案例来帮助大家理解它们三个的区别 &#xff08;三…

【宜搭】低代码开发师高级认证实操题1难点指导

难度&#xff1a; 较难 知识点&#xff1a; 远程数据源 表单创建 表格组件使用 js增删改查功能代码编写 在本文中&#xff0c;我将根据题目的每一点要求&#xff0c;对于我在实操过程中遇到的难点进行比较详细的介绍&#xff0c;供大家参考&#xff0c;希望能够对大家有所帮助…

Bootstrap从入门到精通(全)

目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式4. 表单4.1 控件4.2 布局5. 插件5.1 导航框5.2 下拉菜单前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通&#xff08;全&#xff09;css属性从入…

CSS6大种选择器(超详细!!!!!!)

文章目录一、常用的css基本选择器(4种)1、标签选择器2、类选择器3.id选择器区别&#xff1a;4、通配符选择器二、复合选择器 (2种)1、交集选择器2、并集选择器三、属性选择器(5种)四、关系选择器(4种)五、伪类选择器1、元素选择伪类选择器2、否定伪类选择器3、特殊应用的伪类六…

基于Java+SpringBoot+vue+elementui图书商城系统设计实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取联系&#x1f345;精彩专栏推荐订阅&#x1f447;&#x1f…

完美解决el-cascader回显失败问题

项目场景&#xff1a; 项目场景&#xff1a;接手了一些老项目&#xff0c;需要做一些日志相关的操作&#xff0c;从后台日志跳转到相应页面要带上原来的请求参数&#xff0c;涉及到一个回显问题 问题描述 Element-UI的 <el-cascader /> 这个组件&#xff0c;赋值之后它…

前端与后端传递数据 — — JSON

前端与后端传递数据 — — JSON 1 前端传送JSON数据给后端 1.1 application/x-www-form-urlencoded默认格式 1.1.1 通过HttpServletRequest获取数据 /*** 通过request获取数据* param request* return*/PostMapping("/testDefaultWithNoAnno1")public String test…

自主Web服务器Http_Server

目录自主web服务器背景目标描述技术特点项目定位项目实现过程创建HttpServer基础框架TcpServer.hppHttpServer.hppLog.hppProtocol.hpp解析C端发来的HTTP报文MSG_PEEK标志位Util.hpp构建请求与响应类读取,解析请求构建响应读取请求解析请求构建响应stat系统函数发送响应sendfil…

使用uni-app开发App简易教程

使用uni-app开发App简易教程前言app端开发步骤1、 申请uniapp开发者账号2、登录后开始新建应用3、下载安装 HBuildder X 。4、新建项目5、开启webview&#xff0c;在pages-index里面写一点点代码6、配置mainifest.json7、打包h5工程配置在html中引入uniapp-sdk解决后退问题上架…

【vue2小知识】实现directive自定义指令的封装与全局注册

&#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;将我们的自定义指令directive统一管理并批量注册 目录 一、directive自定义指令介绍 二…

Cannot read properties of undefined (reading ‘validate‘)“

1、注意两个地方 1、ref前面 加冒号“&#xff1a;”&#xff0c;还是不加冒号。 2、this.$refs[value].validate()>&#xff08;&#xff09;&#xff0c;更改为this.$refs[value].validate()>(), 不排除this.$refs[value].validate()>(),有时候不会报错 2、示范代码…

解决本地浏览器运行项目时的跨域问题Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%

解决本地浏览器运行项目时的跨域问题-Access to XMLHttpRequest at ‘file:///C:/Users/Len/Desktop/%E5%8F%AF%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE/dist/model/model.gltf.xz’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supp…

npm sill idealTree buildDeps 安装踩坑指南(详细版)

背景&#xff1a; 已通过nvm安装node 18.8 需要运行 npx create-react-app demo01 首次提醒npm版本过低&#xff0c;但是更新npm失败&#xff0c;并且不再报错&#xff08;安装其他包同样不报错&#xff09; 且换源无果&#xff08;更换淘宝源、清除缓存没效果&#xff09;&am…

【产品新体验】CSDN. 云IDE体验与功能使用教程(保姆级教程)

文章目录前言一、认识云IDE1.1、CSDN.开发云1.2、秘钥管理二、实战-使用云IDE2.1、初步实战springboot-demo&#xff08;clone默认模板代码&#xff09;2.1.1、新建工作空间2.1.2、启动springboot-demo项目2.1.3、编写一个helloworld接口2.2、运行前端工程项目2.2.1、初步尝试—…

Node.js卸载与重装,zip与msi安装详解

Node js卸载与重装&#xff0c;zip与msi安装详解 文章目录Node js卸载与重装&#xff0c;zip与msi安装详解卸载安装选择msi下载安装第一步&#xff1a;第二步&#xff1a;第三步&#xff1a;选择zip压缩包安装&#xff08;选择msi安装的已可以看下这个&#xff09;第一步&#…

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)

基于 Vue3.x Vant UI 的多功能记账本&#xff08;四&#xff09; 文章目录基于 Vue3.x Vant UI 的多功能记账本&#xff08;四&#xff09;项目演示1、登录注册页面2、图片验证码3、修改 axios4、写到最后&#xff08;附源码&#xff09;系列内容参考链接基于 Vue3.x Vant U…

Vue3预览并打印PDF的两种方法

项目场景&#xff1a;后台接口请求数据&#xff0c;返回PDF文档的链接&#xff0c;在vue3页面可预览和打印该PDF。 在之前的Vue2项目中&#xff0c;预览并打印PDF用的是vue-pdf这个插件&#xff0c;但在vue3中是不支持的&#xff0c;只能换个插件了&#xff0c;于是经过测试&a…