vue3 自定义指令

知识点

可以直接查看文档

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

全局自定义指令

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.directive("defineFocus", {
  // 当dom渲染完成后，执行 mounted(el)...
  mounted(el) {
    console.log("defineFocus 指令");
    console.log(el);
    el.focus();
  },
});
app.mount("#app");

局部自定义指令

方式一

<script>
//局部自定义指令
const defineDir = {
 focus:{
  mounted(el){
   el.focus()
  }
 }
}
export default {
 directives:defineDir,
 setup(){}
}
</script>

方式二

<script>
export default {
 directives:{
   focus:{
     mounted(el){
      el.focus()
     }
   }
 },
 setup(){}
}
</script>

自定义指令参数

<template>
  <div v-positionFixed:pos="posData">参数</div>
</template>
 
<script>
//自定义指令动态参数
const defineDir = {
 positionFixed:{
  beforeMount(el,binding){
   el.style.position = "fixed"
   el.style.left = binding.value.left+'px'
   el.style.top = binding.value.top + 'px'
  }
 }
}
export default {
 directives:defineDir,
 setup(){
  const posData = { left:10, top:20 }
  return { posData }
 }
}
</script>