vue自定義封裝指令以及實際使用

Posted on by

前言

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鉤子函數中可用。

實際使用

復制指令（v-copy）

我們先看如何使用：

單擊復制

<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";

點擊icon復制

<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";

handleClick 邏輯

判斷是否有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;

權限操作指令（v-hasPermi）

  • 使用：<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自定義封裝指令以及實際使用的文章就介紹到這瞭,更多相關vue自定義封裝指令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：