vue自定義封裝指令以及實際使用
更新時間：2022年01月25日 12:48:50 作者：cyc重名了
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下
前言
vue默認(rèn)內(nèi)置了v-model、v-if、v-show、v-html、v-text等指令，但是這些往往不足以滿足我們實際項目開發(fā)中的場景，比如權(quán)限控制按鈕、路由菜單，復(fù)制文字等功能，就需要我們自己自定義一些滿足我們項目需求的指令了，那怎么封裝自定義指令，并使用呢？我們先從封裝指令的基礎(chǔ)說起。
封裝指令基礎(chǔ)
鉤子函數(shù)
- bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用?？梢赃M(jìn)行一次性初始化設(shè)置。
- inserted：被綁定元素插入父節(jié)點時調(diào)用（僅保證父節(jié)點存在，但不一定已經(jīng)被插入文檔中）。
- update：所在組件的VNode更新時調(diào)用，也可能發(fā)生在其子VNode更新之前。
- componentUpdated：指令所在組件的VNode及其子VNode全部更新后調(diào)用。
- unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
鉤子函數(shù)參數(shù)
鉤子函數(shù)參數(shù)包含了el、binding、vnode、oldVnode。
- el：指令所綁定的元素，可以用來直接操作DOM。
- binding：一個對象，包含以下屬性
- name：指令名。不包括v-前綴（如：v-copy的name為copy）。
- value：指令的綁定值（如：v-copy='1 + 1'中，value值為2）。
- oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子函數(shù)中可用，無論值是否改變都可用。
- expression：字符串形式的指令表達(dá)式（如：v-copy='1 + 1'，表達(dá)式為"1 + 1"）。
- arg：傳給指令的參數(shù)（如：v-copy:dblclick中，arg的值為dblclick）。
- modifiers：一個包含修飾符的對象（如：v-copy.dblclick.icon中，修飾符對象為：{dblclick: true, icon: true}）。
- vnode：Vue編譯生成的虛擬節(jié)點。
- oldVnode：上一個虛擬節(jié)點。僅在update和componentUpdated鉤子函數(shù)中可用。
實際使用
復(fù)制指令（v-copy）
我們先看如何使用：
單擊復(fù)制
<div v-copy>單擊復(fù)制</div> // 默認(rèn)復(fù)制div的文案 <div v-copy="copyStr">單擊復(fù)制</div> // 復(fù)制指令里的內(nèi)容（copyStr）
給el添加點擊事件，判斷binding的value值是否為空，若為空，默認(rèn)獲取綁定元素的文本內(nèi)容
el.addEventListener("click", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";雙擊復(fù)制
<div v-copy:dblclick>雙擊復(fù)制</div> // 默認(rèn)復(fù)制div的文案 <div v-copy:dblclick="copyStr">雙擊復(fù)制</div> // 復(fù)制指令里的內(nèi)容（copyStr）
給el添加雙擊事件，判斷binding的value值是否為空，若為空，默認(rèn)獲取綁定元素的文本內(nèi)容
el.addEventListener("dblclick", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";點擊icon復(fù)制
<div v-copy:icon>單擊icon復(fù)制</div> // 默認(rèn)復(fù)制div的文案 <div v-copy:icon="copyStr">單擊icon復(fù)制</div> // 復(fù)制指令里的內(nèi)容（copyStr）
判斷el是否已經(jīng)增加了icon，沒有則增加i標(biāo)簽，放置icon，給icon增加點擊事件，進(jìn)行復(fù)制
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的輸入框，沒有則創(chuàng)造一個id為copyTarget的輸入框，然后進(jìn)行選中，調(diào)用execCommand('copy')進(jìn)行選中文字的復(fù)制。
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);
}
// 復(fù)制內(nèi)容
const input = document.getElementById("copyTarget");
input.value = text;
input.select(); // 選取文本域中的內(nèi)容。
// 調(diào)用execCommand()可以實現(xiàn)瀏覽器菜單的很多功能. 如保存文件,打開新文件,撤消、重做操作…
document.execCommand("copy"); // 復(fù)制選中的文字到剪貼板;
// Message.success("復(fù)制成功");
Notification({
title: "成功",
message: `${text}已復(fù)制到剪切板`,
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);
}
// 復(fù)制內(nèi)容
const input = document.getElementById("copyTarget");
input.value = text;
input.select(); // 選取文本域中的內(nèi)容。
// 調(diào)用execCommand()可以實現(xiàn)瀏覽器菜單的很多功能. 如保存文件,打開新文件,撤消、重做操作…
document.execCommand("copy"); // 復(fù)制選中的文字到剪貼板;
// Message.success("復(fù)制成功");
Notification({
title: "成功",
message: `${text}已復(fù)制到剪切板`,
type: "success"
});
}
const install = function (Vue) {
Vue.directive("copy", {
bind (el, binding) {
if (binding.arg === "dblclick") { // 雙擊觸發(fā)
el.addEventListener("dblclick", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";
} else if (binding.arg === "icon") { // 點擊icon觸發(fā)
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 { // 單擊觸發(fā)
el.addEventListener("click", () => {
let str = binding.value ? binding.value : el.innerText;
handleClick(str);
});
el.style.cursor = "copy";
}
}
});
};
export default install;權(quán)限操作指令（v-hasPermi）
- 使用：
<el-button v-hasPermi="['activity:school:add']">新增活動</el-button> - 從store獲取用戶的權(quán)限數(shù)組，判斷此時binding的value值是否存在權(quán)限數(shù)組中，沒有則進(jìn)行按鈕的隱藏。
- 完整代碼
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("請設(shè)置操作權(quán)限標(biāo)簽值");
}
export default {
inserted(el, binding) {
const { value } = binding;
if (!hasPermi(value)){
el.parentNode && el.parentNode.removeChild(el);
}
}
};總結(jié)
到此這篇關(guān)于vue自定義封裝指令以及實際使用的文章就介紹到這了,更多相關(guān)vue自定義封裝指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文給大家?guī)韛ue項目在安卓低版本機(jī)顯示空白的原因分析，根據(jù)各自需求給大家?guī)砹藘煞N原因分析，大家可以參考下2018-09-09
如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件
這篇文章主要介紹了如何封裝了一個vue移動端下拉加載下一頁數(shù)據(jù)的組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue微信公眾號網(wǎng)頁分享的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)可拖拽組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue.js 解決v-model讓select默認(rèn)選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認(rèn)選中不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue使用element-resize-detector監(jiān)聽元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽元素寬度變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
如何用electron把vue項目打包為桌面應(yīng)用exe文件
這篇文章主要介紹了如何用electron把vue項目打包為桌面應(yīng)用exe文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue.js實現(xiàn)的幻燈片功能,結(jié)合實例形式分析了vue.js實現(xiàn)幻燈片的相關(guān)樣式、配置、功能等操作技巧,需要的朋友可以參考下2019-01-01
pdf文件預(yù)覽是開發(fā)業(yè)務(wù)時常見的一個交互,在toB項目中是經(jīng)常用到的,對于用戶上傳文件,預(yù)覽文件等操作時有一個更好的體驗,下面我結(jié)合實際業(yè)務(wù),在vue的基礎(chǔ)上與大家分享這個實現(xiàn)方法,需要的朋友可以參考下2023-09-09