需求:有三个盒子,第一个是el-select输入,第二个是激活添加,第三个是添加成功后的显示,
当点击添加之后会出现el-select,添加成功之后会将添加数据渲染,当没有添加时点击其他地方则会隐藏el-select然后显示添加按钮。
效果:
实现:其他简单效果不赘述。select选择后change事件和blur事件都会触发,通过change传值,blur来隐藏select(因为没有输入的时候失去焦点也需要将select隐藏)
问题:选择值之后出现选择值不出现的情况
原因:@change和@blur冲突,blur事件会比change事件先执行,导致无法激活change传值
解决:为blur添加一个setTimeout
hiddenSelect () {
setTimeout(() => {
this.inputVisible = false
}, 300);
},