您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue3.0如何實(shí)現(xiàn)自定義指令,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在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;
關(guān)于“Vue3.0如何實(shí)現(xiàn)自定義指令”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。