vue3_自定义指令directive

时间：2025-04-22 07:15:04

1.自定义指令注册方式

  • 在 <script setup>

任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令

// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => ()
}
  • 没有使用 <script setup> 的情况下
export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      /* ... */
    }
  }
}
  • 全局注册
const app = createApp({})

// 使 v-focus 在所有组件中都可用
('focus', {
  /* ... */
})

2.指令钩子 及 钩子参数

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

钩子参数：

  • el：指令绑定到的元素。这可以用于直接操作 DOM。

  • binding：一个对象，包含以下属性。

    • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
    • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
    • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
    • modifiers：一个包含修饰符的对象 (如果有的话)。例如在  中，修饰符对象是 { foo: true, bar: true }。
    • instance：使用该指令的组件实例。
    • dir：指令的定义对象。

  • vnode：代表绑定元素的底层 VNode。

  • prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

3.常用指令的示例：拖拽，图片懒加载，权限按钮

  • 拖拽
//父组件：
<template>
    <div class="container">
        <drag v-drag></drag>
    </div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding, onBeforeUpdate } from 'vue';

import { ref } from 'vue'
import drag from './'

const range = (loc: number, min: number, max: number) => {
    if (loc > max) {
        return max;
    } else if (loc < min) {
        return min;
    } else {
        return loc;
    }
}
const vDrag: Directive = {
    mounted(el: HTMLElement) {
        let moveEl = el as HTMLElement
        const moveDown = (e: MouseEvent) => {
            let X =  - 
            let Y =  - 
            const move = (e: MouseEvent) => {
                let w =  - X
                let h =  - Y
                let winWidth = 
                let winHeight = 
                w = range(w, 0, winWidth - )
                h = range(h, 0, winHeight - )
                 = w + 'px'
                 = h + 'px'
            }
            ('mousemove', move)
            ('mouseup', () => {
                ('mousemove', move)
            })
        }
        ('mousedown', moveDown)

    }

}
</script>

//拖拽子组件
<template>
 <div class="box">
 </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
</script>

<style scoped lang="less">
.box {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
  • 图片懒加载

IntersectionObserver 可以用来自动监听元素是否进入了设备的可视区域之内，官方文档解释：/zh-CN/docs/Web/API/IntersectionObserver

<template>
    <div class="container">
        <div class="conimg">
            <div class="img" v-for="item in arr">
                <img  :data-index="item" alt="" v-lazy="item">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding, onBeforeUpdate } from 'vue';
import { ref } from 'vue'
const images: Record<string, { default: string }> = ('/src/assets/image/*.jpg')
// const images: Record<string, { default: string }> = ('/src/assets/image/*.jpg')
let arr = (images)
// let arr = (images).map(v => )

let vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
    let url = await import('../../../public/')
     = 
    let observer = new IntersectionObserver((entires) => {
        (entires);
        if(entires[0].intersectionRatio >0 && entires[0].isIntersecting){
            setTimeout(()=>{
                 = 
                (el)
            },4000)
        }
    })
    (el)

}

}
</script>

<style scoped>
.conimg{
    width: 200px;
    height: 600px;
    border:1px solid ;
    overflow: auto;
}
.img {
    width: 200px;
    height: 200px;
}
img{
    width: 100%;
    height: 100%;
}
</style>
  • 权限按钮

<template>
    <div class="container">
        <div class="btn">
            <el-button v-has-show="'shop:create'">创建</el-button>
            <el-button v-has-show="'shop:delete'">删除</el-button>
            <el-button v-has-show="'shop:edit'">编辑</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding, onBeforeUpdate } from 'vue';

import { ref } from 'vue'
('uId', 'xxx')
// 后端返回
const permission = [
    'xxx:shop:edit',
    // 'xxx:shop:create',
    // 'xxx:shop:delete',
]
const uid = ('uId')
const vHasShow: Directive<HTMLElement, string> = (el, bingding) => {
    if (!(uid + ':' + )) {
         = 'none'
    }
}

</script>

 分享读过的写的较清晰的文章

/post/7107477387578703885

vue官网

相关文章