Vue3.0寫(xiě)自定義指令的簡(jiǎn)單步驟記錄
前言
vue中提供了豐富的內(nèi)置指令,如v-if,v-bind,v-on......,除此之外我們還可以通過(guò)Vue.directive({})或者directives:{}來(lái)定義指令
在開(kāi)始學(xué)習(xí)之前我們應(yīng)該理解,自定義指令的應(yīng)用場(chǎng)景,任何功能的開(kāi)發(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 寫(xiě)入我們的指令內(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寫(xiě)自定義指令的文章就介紹到這了,更多相關(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-06vue踩坑記錄之?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-05vue 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-01Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10Vue?keep-alive的實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue?keep-alive的實(shí)現(xiàn)原理分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue拖拽組件vuedraggable使用說(shuō)明詳解
這篇文章主要為大家詳細(xì)介紹了vue拖拽組件vuedraggable的使用說(shuō)明,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04