vue3自定义指令v-focus

在Vue 3中，你可以通过自定义指令来实现v-focus的功能。下面是一个示例代码：

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

const app = createApp(App)
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

<!-- App.vue -->
<template>
  <div>
    <input v-focus />
  </div>
</template>

上面的代码中，我们在`mounted`钩子函数中调用`el.focus()`来使元素获取焦点。然后，在App.vue的模板中使用`v-focus`指令即可将焦点设置到该输入框。

相关问题

vue3的自定义指令v-focus

v-focus自定义指令可以用于页面加载时自动聚焦到指定的输入框，这个指令可以在Vue3的setup函数中使用。示例代码如下：

<template>
  <input v-focus />
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);

    onMounted(() => {
      inputRef.value.focus();
    });

    return {
      inputRef,
    };
  },
};
</script>

vue3自定义指令使用

Vue3中的自定义指令可以通过`directive`函数来创建。下面是一个简单的例子：

// 注册一个全局自定义指令 `v-focus`
const app = Vue.createApp({});
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus();
  }
})

上述代码中，我们通过`app.directive`函数注册了一个名为`v-focus`的全局自定义指令，并在其中定义了`mounted`生命周期钩子函数，该函数会在指令所绑定的元素被插入到DOM中时执行，从而实现了让该元素自动获取焦点的功能。

除了全局自定义指令，我们还可以通过`setup`语法糖来定义局部自定义指令。下面是一个示例：

<template>
  <div v-bg>局部自定义指令</div>
</template>

<script setup>
const vBg = {
  mounted(el) {
    el.style.backgroundColor = 'green';
  }
}
</script>

上述代码中，我们通过`<script setup>`标签中的代码定义了一个名为`vBg`的局部自定义指令，并在其中定义了`mounted`生命周期钩子函数，该函数会在指令所绑定的元素被插入到DOM中时执行，从而实现了让该元素的背景色变为绿色的功能。