情景：
关闭弹窗后，父组件中输入框自动获取焦点。
eg
- 解决一：直接将el-dialog写在父组件中，就不存在父子关系，这样在关闭前，直接让输入框获取焦点。
- 缺点：代码清新度不高，不够模块化，假如存在多个dialog，所有代码扔一块，不方便管理维护。
优化方案：
- 解决二：将dialog抽取出来，作为单一的模块，掌管自己的逻辑。
- 缺点：假如涉及到比较多的数据交互，对于状态的管理会增加业务量。
- 优点：代码清晰度高，分模块管理。
具体步骤：①使用vuex保存状态，在el-dialog before-close之前发送获取焦点指令
②在父组件中，监听这个状态值（状态值改变时候就执行获取焦点的方法）。关于如何获取焦点可以参考前面的文章elementUI el-input focus
貌似狠简单的样子，不就是vuex，操作状态的改变么？呵呵
代码片段
//子组件
<template>
<el-dialog title="请录入唯一码"
......
:before-close="removeData"
:lock-scroll="false"
>
......
</el-dialog>
</template>
......
methods: {
...mapActions([
'setInputFocus',
]),
// dialog 关闭之前
removeData() {
this.setInputFocus(new Date()) //这个才是关键中的关键
},
}
//父组件中
computed: {
...mapState([
'inputSubFocus',
]),
},
watch: {
'inputSubFocus': 'needFocus'
},
methods:{
needFocus() {
this.$refs.xxx.$el.querySelector('input').focus();
},
}
state
export default {
inputSubFocus: '',
}
actions。。。略过
