Vue3.0寫自定義指令的簡(jiǎn)單步驟記錄
前言
vue中提供了豐富的內(nèi)置指令,如v-if,v-bind,v-on......,除此之外我們還可以通過(guò)Vue.directive({})或者directives:{}來(lái)定義指令
在開始學(xué)習(xí)之前我們應(yīng)該理解,自定義指令的應(yīng)用場(chǎng)景,任何功能的開發(fā)都是為了解決具體的問(wèn)題的,
通過(guò)自定義指令,我們可以對(duì)DOM進(jìn)行更多的底層操作,這樣不僅可以在某些場(chǎng)景下為我們提供快速解決問(wèn)題的思路,而且讓我們對(duì)vue的底層有了進(jìn)一步的了解
第一步
在main.js
在src下簡(jiǎn)歷對(duì)應(yīng)的文件夾
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]); // 注冊(cè)
});
}
};
export default directives;// 拋出
第三步
在copy.js 寫入我們的指令內(nèi)容 Vue2 與Vue3只是一些生命周期函數(shù)修改
import { ElMessage } from "element-plus";
const copy = {
mounted (el, { value }) {
el.$value = value;
el.handler = () => {
if (!el.$value) {
// 值為空的時(shí)候,給出提示
ElMessage.warning({
message: "您好,復(fù)制的值不能為空。",
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("復(fù)制成功");
};
// 綁定點(diǎn)擊事件
el.addEventListener("click", el.handler);
},
beforeUpdate (el, {
value
}) {
el.$value = value;
},
unmounted (el) {
el.removeEventListener("click", el.handler);
}
};
export default copy;
總結(jié)
到此這篇關(guān)于Vue3.0寫自定義指令的文章就介紹到這了,更多相關(guān)Vue3.0自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
vue踩坑記錄之?dāng)?shù)組定義和賦值問(wèn)題
這篇文章主要給大家介紹了關(guān)于vue踩坑記錄之?dāng)?shù)組定義和賦值問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計(jì)算方法
下面小編就為大家分享一篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計(jì)算方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁(yè)面,瀏覽器窗口隨意拉伸,背景視頻及前景登錄組件均能完美適配,背景視頻可始終鋪滿窗口,前景組件始終居中,視頻的內(nèi)容始終得到最大限度的保留,可以得到最好的視覺(jué)效果2018-01-01
Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue?keep-alive的實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue?keep-alive的實(shí)現(xiàn)原理分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue拖拽組件vuedraggable使用說(shuō)明詳解
這篇文章主要為大家詳細(xì)介紹了vue拖拽組件vuedraggable的使用說(shuō)明,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

