vue3中如何让input自动获取焦点

在main.js中全局注册自定义指令

const app = createApp(App)
app.directive('myfocus',{
    mounted: (el, binding) => {
        if (binding.value == true || binding.value == undefined) {
            el.focus()
        }
    }
    // created初始化、beforeMount、mounted挂载、beforeUpdate、updated更新、beforeUnmount、unmounted销毁
});

在页面中注册自定义指令

directives: {
    'myfocus': {
        updated: (el, binding) =>{
            if (binding.value === true || binding.value === undefined) {
                el.focus()
            }
        }
    }
}
    // created初始化、beforeMount、mounted挂载、beforeUpdate、updated更新、beforeUnmount、unmounted销毁

使用自定义的自动获取焦点指令

// 不执行
<input v-myfocus="false" v-model="value" />
// 执行
<input v-myfocus="true" v-model="value" />

使用ref获取焦点

<input ref="refInput" type="text" v-model="value"></el-input>

const refInput = ref(null)
const getFocus = () => {
    nextTick( () => {
        refInput.value.focus();
    })
}