Vue3.0寫自定義指令的簡單步驟記錄
前言
vue中提供瞭豐富的內置指令,如v-if,v-bind,v-on……,除此之外我們還可以通過Vue.directive({})或者directives:{}來定義指令
在開始學習之前我們應該理解,自定義指令的應用場景,任何功能的開發都是為瞭解決具體的問題的,
通過自定義指令,我們可以對DOM進行更多的底層操作,這樣不僅可以在某些場景下為我們提供快速解決問題的思路,而且讓我們對vue的底層有瞭進一步的瞭解
第一步
在main.js
在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自定義指令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue自定義復制指令 v-copy功能的實現
- 詳解Vue進階構造屬性
- vue2.x與vue3.x中自定義指令詳解(最新推薦)
- vue 自定義指令directives及其常用鉤子函數說明
- JS如何使用剪貼板操作Clipboard API