vue3自定义指令入门使用

一、简单示例

// main.js 或指令定义文件
import { createApp } from 'vue';

const app = createApp({});

// 自定义指令
app.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时
  mounted(el, binding) {
    const delay = binding.arg ? parseInt(binding.arg, 10) : 0; // 通过binding.arg获取传入的参数
    setTimeout(() => {
      el.focus();
    }, delay);
  }
});

// 挂载应用
app.mount('#app');

使用示例

<input v-focus />
<input v-focus:300 />

二、多参数示例

// main.js 或指令定义文件
import { createApp } from 'vue';

const app = createApp({});

// 自定义指令
app.directive('focus', {
  mounted(el, binding) {
    const { delay, color } = binding.value; // 解构获取多个参数
    const parsedDelay = delay ? parseInt(delay, 10) : 0;

    setTimeout(() => {
      el.style.color = color; // 设置颜色
      el.focus(); // 获取焦点
    }, parsedDelay);
  }
});

// 挂载应用
app.mount('#app');

使用示例

<input v-focus="{ delay: 300, color: 'red' }" />