自定义指令 - 技术栈

自定义指令

代码续发2025-12-16 15:18

一、是什么？

1.概念

前端框架提供的扩展 DOM 行为的方式，允许开发者封装可复用的 DOM 操作逻辑，直接作用于 DOM 元素。相当于是自定义v-for的样子，而不用官方定义的指令。

2.类别

全局指令：通过Vue.directive()（Vue2）或app.directive()（Vue3）注册，全项目可用；
局部指令：在组件内通过directives选项声明，仅当前组件可用。

二、如何实现？

以v-focus为例

1.全局注册

在main.js中注册

c 复制代码

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 注册全局自定义指令：v-focus
app.directive('focus', {//自定义指令名
  // 指令钩子：元素挂载到DOM时触发
  mounted(el) {
    // el是指令绑定的DOM元素（此处为input/textarea）
    el.focus() // 原生DOM方法：获取焦点
  },
  // 可选：元素更新时触发（如弹窗从隐藏到显示）
  updated(el) {
    el.focus()
  }
})

app.mount('#app')

在App.vue中使用

c 复制代码

<template>
  <div class="demo">
    <h3>自定义指令：v-focus</h3>
    <!-- 绑定v-focus指令，输入框挂载后自动聚焦 -->
    <input v-focus type="text" placeholder="自动聚焦的输入框" />

    <!-- 进阶：弹窗内的输入框聚焦 -->
    <button @click="showModal = true">打开弹窗</button>
    <div class="modal" v-if="showModal">
      <input v-focus type="text" placeholder="弹窗内自动聚焦" />
      <button @click="showModal = false">关闭</button>
    </div>
  </div>
</template>

2.局部注册

在使用的组件中声明即可

在App.vue中声明并使用

c 复制代码

<template>
  <input v-focus type="text" placeholder="局部指令自动聚焦" />
</template>

<script setup>
// 局部自定义指令
const vFocus = {
  mounted(el) {
    el.focus()
  }
}
</script>

三、应用实例

如何实现权限控制？

c 复制代码

<el-button
                  icon="el-icon-actualSearchForm"
                  type="primary"
                  size="mini"
                  @click="searchContractData"
                  v-loading.fullscreen.lock="operateLoading"
                  v-privilege="activeMenu + 'QUERY'"
                  >合同查询</el-button
                >

1.在method.js中定义权限指令

2.读取权限数据

bash 复制代码

this.activeMenu = window.top.localStorage.getItem('activeMenu')

四、拓展

这篇文章有很多自定义案例介绍，小伙伴们有还没看过瘾的来这篇瞧瞧：自定义指令案例