溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vue自定義封裝指令及實際使用的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue自定義封裝指令及實際使用的方法”吧!
vue默認內置了v-model、v-if、v-show、v-html、v-text等指令，但是這些往往不足以滿足我們實際項目開發中的場景，比如權限控制按鈕、路由菜單，復制文字等功能，就需要我們自己自定義一些滿足我們項目需求的指令了，那怎么封裝自定義指令，并使用呢？我們先從封裝指令的基礎說起。
bind：只調用一次，指令第一次綁定到元素時調用。可以進行一次性初始化設置。
inserted：被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已經被插入文檔中）。
update：所在組件的VNode更新時調用，也可能發生在其子VNode更新之前。
componentUpdated：指令所在組件的VNode及其子VNode全部更新后調用。
unbind：只調用一次，指令與元素解綁時調用。
鉤子函數參數包含了el、binding、vnode、oldVnode。
el：指令所綁定的元素，可以用來直接操作DOM。
binding：一個對象，包含以下屬性
name：指令名。不包括v-前綴（如：v-copy的name為copy）。
value：指令的綁定值（如：v-copy='1 + 1'中，value值為2）。
oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子函數中可用，無論值是否改變都可用。
expression：字符串形式的指令表達式（如：v-copy='1 + 1'，表達式為"1 + 1"）。
arg：傳給指令的參數（如：v-copy:dblclick中，arg的值為dblclick）。
modifiers：一個包含修飾符的對象（如：v-copy.dblclick.icon中，修飾符對象為：{dblclick: true, icon: true}）。
vnode：Vue編譯生成的虛擬節點。
oldVnode：上一個虛擬節點。僅在update和componentUpdated鉤子函數中可用。
我們先看如何使用：
<div v-copy>單擊復制</div> // 默認復制div的文案 <div v-copy="copyStr">單擊復制</div> // 復制指令里的內容（copyStr）
給el添加點擊事件，判斷binding的value值是否為空，若為空，默認獲取綁定元素的文本內容
el.addEventListener("click", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";<div v-copy:dblclick>雙擊復制</div> // 默認復制div的文案 <div v-copy:dblclick="copyStr">雙擊復制</div> // 復制指令里的內容（copyStr）
給el添加雙擊事件，判斷binding的value值是否為空，若為空，默認獲取綁定元素的文本內容
el.addEventListener("dblclick", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";<div v-copy:icon>單擊icon復制</div> // 默認復制div的文案 <div v-copy:icon="copyStr">單擊icon復制</div> // 復制指令里的內容（copyStr）
判斷el是否已經增加了icon，沒有則增加i標簽，放置icon，給icon增加點擊事件，進行復制
if (el.hasIcon) return;
const iconElement = document.createElement("i");
iconElement.setAttribute("class", "el-icon-document-copy");
iconElement.setAttribute("style", "margin-left:5px");
el.appendChild(iconElement);
el.hasIcon = true;
iconElement.addEventListener("click", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
iconElement.style.cursor = "copy";判斷是否有id為copyTarget的輸入框，沒有則創造一個id為copyTarget的輸入框，然后進行選中，調用execCommand('copy')進行選中文字的復制。
function handleClick (text) {
if (!document.getElementById("copyTarget")) {
const copyTarget = document.createElement("input");
copyTarget.setAttribute("id", "copyTarget");
copyTarget.setAttribute("style", "position:fixed;top:0;left:0;opacity:0;z-index:-1000;");
document.body.appendChild(copyTarget);
}
// 復制內容
const input = document.getElementById("copyTarget");
input.value = text;
input.select(); // 選取文本域中的內容。
// 調用execCommand()可以實現瀏覽器菜單的很多功能. 如保存文件,打開新文件,撤消、重做操作…
document.execCommand("copy"); // 復制選中的文字到剪貼板;
// Message.success("復制成功");
Notification({
title: "成功",
message: `${text}已復制到剪切板`,
type: "success"
});
}import { Message, Notification } from "element-ui";
function handleClick (text) {
if (!document.getElementById("copyTarget")) {
const copyTarget = document.createElement("input");
copyTarget.setAttribute("id", "copyTarget");
copyTarget.setAttribute("style", "position:fixed;top:0;left:0;opacity:0;z-index:-1000;");
document.body.appendChild(copyTarget);
}
// 復制內容
const input = document.getElementById("copyTarget");
input.value = text;
input.select(); // 選取文本域中的內容。
// 調用execCommand()可以實現瀏覽器菜單的很多功能. 如保存文件,打開新文件,撤消、重做操作…
document.execCommand("copy"); // 復制選中的文字到剪貼板;
// Message.success("復制成功");
Notification({
title: "成功",
message: `${text}已復制到剪切板`,
type: "success"
});
}
const install = function (Vue) {
Vue.directive("copy", {
bind (el, binding) {
if (binding.arg === "dblclick") { // 雙擊觸發
el.addEventListener("dblclick", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";
} else if (binding.arg === "icon") { // 點擊icon觸發
if (el.hasIcon) return;
const iconElement = document.createElement("i");
iconElement.setAttribute("class", "el-icon-document-copy");
iconElement.setAttribute("style", "margin-left:5px");
el.appendChild(iconElement);
el.hasIcon = true;
iconElement.addEventListener("click", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
iconElement.style.cursor = "copy";
} else { // 單擊觸發
el.addEventListener("click", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";
}
}
});
};
export default install;使用：<el-button v-hasPermi="['activity:school:add']">新增活動</el-button>
從store獲取用戶的權限數組，判斷此時binding的value值是否存在權限數組中，沒有則進行按鈕的隱藏。
完整代碼
import store from "@/store";
const allPermission = "*:*:*";
export function hasPermi(value){
// return true;
const permissions = store.getters && store.getters.permissions;
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value;
const hasPermissions = permissions.some(permission => allPermission === permission || permissionFlag.includes(permission));
if (!hasPermissions) {
return false;
}
return true;
}
throw new Error("請設置操作權限標簽值");
}
export default {
inserted(el, binding) {
const { value } = binding;
if (!hasPermi(value)){
el.parentNode && el.parentNode.removeChild(el);
}
}
};到此，相信大家對“vue自定義封裝指令及實際使用的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
