1.先说原生的autofocus="autofocus"属性
只在模板加载完成时起作用，也就是说只有第一次有用
<input type="text" autofocus="autofocus" v-model="code" />
2.这种方式解决了第一种只起一次作用的情况
<input type="text" ref="inputdata" v-model="code" />
created() {
this.$nextTick(() => {
this.$refs.inputdata.focus()
})
},
3.一进入页面input框不展示，input框显示在隐藏的弹窗中，只有弹窗显示的时候他才显示。
使用自定义指令方式directives:{}
// 需要把element组件输入框改为原生input框
<input type="text" v-model="code" >
// 再给他添加v-if，v-if 与弹窗的 v-show的值绑定在一起
<el-dialog title="提示" :visible.sync="dialogVisible">
<input v-focus v-if="dialogVisible" type="text" v-model="code" >
</el-dialog>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
// 最后编写自定义指令(语法跟created(){}平级)
directives: {
focus: {
inserted: function(el) {
el.focus();
}
}
},
