Vue3.0寫自定義指令的簡單步驟記錄
前言
vue中提供了豐富的內(nèi)置指令,如v-if,v-bind,v-on......,除此之外我們還可以通過Vue.directive({})或者directives:{}來定義指令
在開始學(xué)習(xí)之前我們應(yīng)該理解,自定義指令的應(yīng)用場景,任何功能的開發(fā)都是為了解決具體的問題的,
通過自定義指令,我們可以對DOM進行更多的底層操作,這樣不僅可以在某些場景下為我們提供快速解決問題的思路,而且讓我們對vue的底層有了進一步的了解
第一步
在main.js
在src下簡歷對應(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]); // 注冊 }); } }; 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) { // 值為空的時候,給出提示 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ù)制成功"); }; // 綁定點擊事件 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue translate peoject實現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實現(xiàn)在線翻譯功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法
下面小編就為大家分享一篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實現(xiàn)方式
本文講述如何實現(xiàn)擁有酷炫背景視頻的登錄頁面,瀏覽器窗口隨意拉伸,背景視頻及前景登錄組件均能完美適配,背景視頻可始終鋪滿窗口,前景組件始終居中,視頻的內(nèi)容始終得到最大限度的保留,可以得到最好的視覺效果2018-01-01