这篇文章将为大家详细讲解有关Vue3.0如何实现自定义指令，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在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);
},
beforeUpdate (el, {
value
}) {
el.$value = value;
},
unmounted (el) {
el.removeEventListener("click", el.handler);
}
};
export default copy;关于“Vue3.0如何实现自定义指令”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
