elementUI select组件 blur失去焦点新建条目
**摘要**select组件如果想手动创建一个条目,需要设置allow-create为true,输入完成后还需要点击一下新建的条目,才能更新显示的内容,不然会还原为初始值。个人认为不太人性化,在失去焦点时自动创建才是最好的选择。**实现思路:**利用Vue的自定义指令监听select组件内部的input,把input的值保存起来,等到input失去焦点的时候,把这个值赋给selec...
·
**
摘要
**
select组件如果想手动创建一个条目,需要设置allow-create为true,
输入完成后还需要点击一下新建的条目,才能更新显示的内容,不然会还原为初始值。个人认为不太人性化,在失去焦点时自动创建才是最好的选择。
**
实现思路:
**
利用Vue的自定义指令监听select组件内部的input,等到input失去焦点的时候,把这个值赋给select组件绑定的变量。
部分代码
html部分片段【el-select-input==elSelectInput】
<el-select v-el-select-input
js部分
export default {
directives: {
elSelectInput: {
bind: function(el) {
if (el.tagName.toLowerCase() !== 'input') {
el = el.getElementsByTagName('input')[0];
}
el.addEventListener('input',function () {
console.log(el.value);
})
}
}
}
}
自定义指令参考链接
更多推荐
已为社区贡献1条内容
所有评论(0)