Vue3和ElementPlus环境如何让Form元素获得焦点

35 阅读1分钟

没想到这么个小问题竟然花了我3个小时的时间才搞定,mark一下吧。

1、Element Plus中,可以通过autofocus

<el-input v-model="appsysname" autofocus />

2、在Element Plus的Dialog对话框中,可以通过在Dialog的opened事件中设置

<el-dialog :v-model="selectDialogVisible" @opened="inputFocus">
    <el-input v-model="input" ref="inputRef"  />
</el-dialog>                
<script setup>
    const inputRef = ref(null)
    const inputFocus = () => {
        inputRef.value.focus()
    }
</script>

Vue3中,可以通过自定义指令:

cn.vuejs.org/guide/reusa…

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