Vue中除了内置指令,也允许注册自定义的指令,下面这篇文章主要给大家介绍了关于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 = 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); }, beforeU<p style="color:transparent">本文来源gao!%daima.com搞$代*!码$网3</p>pdate (el, { value }) { el.$value = value; }, unmounted (el) { el.removeEventListener("click", el.handler); } }; export default copy;
总结
以上就是Vue3.0写自定义指令的简单步骤记录的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue3.0写自定义指令的简单步骤记录
转载请注明原文链接：Vue3.0写自定义指令的简单步骤记录
