Vue3.0写自定义指令的简单步骤记录
前言
vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令
在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的,
通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解
第一步
在main.js
在src下简历对应的文件夹
import Directives from "@/Directives/index"; // 自定义指令(@ 代表src)const app = createApp(App); app.use(Directives); app.mount("#app");
文章图片
第二步
import copy from "./copy"; // 引入需要的指令const directivesList = {copy // 挂载}; const directives = {install: function (app) {Object.keys(directivesList).forEach((key) => {app.directive(key, directivesList[key]); // 注册}); }}; export default directives; // 抛出
第三步
在copy.js 写入我们的指令内容 Vue2 与Vue3只是一些生命周期函数修改
import { ElMessage } from "element-plus"; const copy = {mounted (el, { value }) {el.$value = https://www.it610.com/article/value; el.handler = () => {if (!el.$value) {// 值为空的时候,给出提示ElMessage.warning({message: "您好,复制的值不能为空。",type: "warning"}); return; }if (window.clipboardData) {window.clipboardData.setData("text", el.$value); } else {(function (content) {document.oncopy = function (e) {e.clipboardData.setData("text", content); e.preventDefault(); document.oncopy = null; }; })(el.$value); document.execCommand("Copy"); }ElMessage.success("复制成功"); }; // 绑定点击事件el.addEventListener("click", el.handler); },beforeUpdate (el, {value}) {el.$value = https://www.it610.com/article/value; },unmounted (el) {el.removeEventListener("click", el.handler); }}; export default copy;
总结
【Vue3.0写自定义指令的简单步骤记录】到此这篇关于Vue3.0写自定义指令的文章就介绍到这了,更多相关Vue3.0自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 今天写一些什么
- 小影写在2018九月开学季
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 写给陈羡
- angular2内置管道
- 列出所有自定义的function和view
- 尖子生的启示(3)