前言 Vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令
Vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令
在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的,
通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解
在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写自定义指令的文章就介绍到这了,更多相关Vue3.0自定义指令内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue3.0写自定义指令的简单步骤记录
本文链接: https://www.lsjlt.com/news/129237.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0