vue3自定义指令

自定义指令的钩子

• 局部指令
  • 在<script setup>

<script setup>
const vFocus = {
  mounted: (el) => el.focus(),
};
</script>
<template>
  <input v-focus />
</template>

• 在export default中

<script>
export default {
  props: {
    tt: Number,
  },
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
  setup(props) {
    console.log(props);

    return {};
  },
};
</script>
<template>
  <input v-focus />
</template>

• 全局指令

const app = createApp({})

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

• 其他的一些参数可以直接点击文档进行查看https://cn.vuejs.org/guide/reusability/custom-directives.html#introduce