10個Vue項目必備的高頻實用自定義指令(復(fù)制即用)
更新時間：2026年04月10日 08:30:22 作者：前端Hardy
在實際開發(fā)中,很多重復(fù)邏輯用自定義指令來做最優(yōu)雅,既不污染組件,復(fù)用性又極強,?所以本文小編為大家整理了?10?個企業(yè)級最常用的?Vue?自定義指令,復(fù)制到項目就能直接用,建議收藏進你的工具庫
在實際開發(fā)中，很多重復(fù)邏輯（權(quán)限控制、防抖點擊、圖片懶加載、文本復(fù)制等）用自定義指令來做最優(yōu)雅，不污染組件、不寫冗余代碼、復(fù)用性極強。
今天整理了 10 個企業(yè)級最常用的 Vue 自定義指令，Vue2 / Vue3 都能跑，復(fù)制到項目里直接用，建議收藏進你的工具庫。
1. v-permission 按鈕權(quán)限控制（后臺系統(tǒng)必用）
根據(jù)權(quán)限碼控制按鈕顯隱，后端返回權(quán)限列表直接用。
// directives/permission.js
import { useUserStore } from '@/stores/user'
export default {
mounted(el, binding) {
const { permissions } = useUserStore()
const value = binding.value
if (!value) return
// 無權(quán)限則移除元素
if (!permissions.includes(value)) {
el.parentNode?.removeChild(el)
}
}
}
使用：
<button v-permission="'user:add'">添加用戶</button>
2. v-debounce 防抖點擊（搜索/提交防重復(fù)）
// directives/debounce.js
export default {
mounted(el, binding) {
const { func, delay = 300 } = binding.value
let timer = null
el.addEventListener('click', () => {
clearTimeout(timer)
timer = setTimeout(() => func(), delay)
})
}
}
使用：
<button v-debounce="{ func: handleSearch, delay: 500 }">搜索</button>3. v-throttle 節(jié)流指令（滾動/防狂點）
// directives/throttle.js
export default {
mounted(el, binding) {
const { func, delay = 500 } = binding.value
let lastTime = 0
el.addEventListener('click', () => {
const now = Date.now()
if (now - lastTime >= delay) {
func()
lastTime = now
}
})
}
}
4. v-copy 一鍵復(fù)制文本
// directives/copy.js
export default {
mounted(el, binding) {
el.addEventListener('click', () => {
const text = binding.value
navigator.clipboard.writeText(text).then(() => {
ElMessage.success('復(fù)制成功')
})
})
}
}
使用：
<span v-copy="orderNo">復(fù)制訂單號</span>
5. v-longpress 長按指令
// directives/longpress.js
export default {
mounted(el, binding) {
const { func, time = 1000 } = binding.value
let timer = null
el.addEventListener('mousedown', () => {
timer = setTimeout(() => func(), time)
})
el.addEventListener('mouseup mouseleave', () => clearTimeout(timer))
}
}
6. v-input-number 僅允許輸入數(shù)字（支持小數(shù)）
// directives/number.js
export default {
mounted(el) {
const input = el.tagName === 'INPUT' ? el : el.querySelector('input')
input.addEventListener('input', () => {
input.value = input.value.replace(/[^\d.]/g, '')
const arr = input.value.split('.')
if (arr.length > 2) input.value = arr[0] + '.' + arr[1]
})
}
}
使用：
<el-input v-input-number v-model="num" />
7. v-lazy 圖片懶加載（性能優(yōu)化）
// directives/lazy.js
export default {
mounted(el, binding) {
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
observer.observe(el)
}
}
使用：
<img v-lazy="imgUrl" alt="" />
8. v-draggable 元素拖拽
// directives/drag.js
export default {
mounted(el) {
el.style.cssText += ';position:fixed;cursor:move;'
el.addEventListener('mousedown', (e) => {
const x = e.clientX - el.offsetLeft
const y = e.clientY - el.offsetTop
const move = (e) => {
el.style.left = e.clientX - x + 'px'
el.style.top = e.clientY - y + 'px'
}
document.addEventListener('mousemove', move)
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', move)
}, { once: true })
})
}
}
9. v-watermark 頁面水?。ǚ澜貓D）
// directives/watermark.js
export default {
mounted(el, binding) {
const text = binding.value || '內(nèi)部資料'
const canvas = document.createElement('canvas')
canvas.width = 200
canvas.height = 150
const ctx = canvas.getContext('2d')
ctx.font = '14px Arial'
ctx.fillStyle = 'rgba(0,0,0,0.1)'
ctx.rotate(-0.2)
ctx.fillText(text, 20, 50)
el.style.background = `url(${canvas.toDataURL()}) repeat`
}
}
10. v-auto-height 自適應(yīng)高度（表格/彈窗常用）
自動計算高度，避免滾動條錯亂
// directives/autoHeight.js
export default {
mounted(el) {
const resize = () => {
const top = el.getBoundingClientRect().top
el.style.height = window.innerHeight - top - 20 + 'px'
}
resize()
window.addEventListener('resize', resize)
el._resize = resize
},
unmounted(el) {
window.removeEventListener('resize', el._resize)
}
}
統(tǒng)一注冊（Vue3）
在 directives/index.js 統(tǒng)一導(dǎo)出：
import permission from './permission'
import debounce from './debounce'
// ...其他
export default {
install(app) {
app.directive('permission', permission)
app.directive('debounce', debounce)
}
}
main.js 引入：
import directives from '@/directives' app.use(directives)
到此這篇關(guān)于10個Vue項目必備的高頻實用自定義指令(復(fù)制即用)的文章就介紹到這了,更多相關(guān)Vue自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
模式是 Vue CLI 項目中一個重要的概念，下面這篇文章主要給大家介紹了關(guān)于Vue CLI中模式與環(huán)境變量的相關(guān)資料，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue2.x對象單層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue項目中$t()的意思是什么，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目自動設(shè)置請求狀態(tài)的配置方法,本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了Vue Echarts實現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-12-12
這篇文章主要為大家詳細介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
基于Vue3+Node.js實現(xiàn)客服實時聊天功能
想象一下淘寶客服的聊天窗口：你發(fā)消息,客服立刻就能看到并回復(fù),這種即時通訊效果是如何實現(xiàn)的呢？本文我們使用 Vue3 作為前端框架,Node.js 作為后端,通過 WebSocket+ Socket.IO 協(xié)議實現(xiàn)實時通信,需要的朋友可以參考下2025-05-05
Vue使用Echarts實現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新
這篇文章主要介紹了Vue使用Echarts實現(xiàn)橫向柱狀圖,并通過WebSocket即時通訊更新方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
理解?Vue?實例的掛載過程,不僅有助于我們更好地掌握?Vue?的核心原理,還能提高我們在開發(fā)中的調(diào)試和優(yōu)化能力,下面就跟隨小編一起學(xué)習(xí)一下吧2024-12-12
這篇文章主要介紹了詳解Vue中過度動畫效果應(yīng)用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05