vue3 el-input弹窗autofocus

在Vue 3中，你可以使用`ref`来控制`el-input`的`autofocus`属性。首先，在组件中定义一个`ref`，然后将其绑定到`el-input`的`autofocus`属性上。

<template>
  <div>
    <el-input v-model="inputValue" :autofocus="inputFocus"></el-input>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <el-input v-model="dialogInputValue" :autofocus="dialogInputFocus"></el-input>
    </el-dialog>
  </div>
</template>

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

export default {
  setup() {
    const inputValue = ref('');
    const inputFocus = ref(true);
    const dialogVisible = ref(false);
    const dialogInputValue = ref('');
    const dialogInputFocus = ref(false);

    const openDialog = () => {
      dialogVisible.value = true;
      dialogInputFocus.value = true;
    };

    return {
      inputValue,
      inputFocus,
      dialogVisible,
      dialogInputValue,
      dialogInputFocus,
      openDialog,
    };
  },
};
</script>

在上面的例子中，我们使用了两个不同的`ref`来控制两个不同的`el-input`的`autofocus`属性。当点击“打开弹窗”按钮时，弹窗会显示，并且弹窗中的`el-input`会自动获取焦点。