elementUI中input组件的autofocus属性不生效
如图所以:点击航线名字需要切换输入框,输入框需要自动聚焦,这样即使啥也不修改也能执行失焦事件。elementUI文档上有一个autofocus属性,把autofocus设置成true发现并没有自动获取焦点。失效的原因:autofocus是vue中input的原生属性,element也支持这种方法,但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。解决办法:自定义指令在
·
如图所以:点击航线名字需要切换输入框,输入框需要自动聚焦,这样即使啥也不修改也能执行失焦事件。
elementUI文档上有一个autofocus属性,把autofocus设置成true发现并没有自动获取焦点。
失效的原因:
autofocus是vue中input的原生属性,element也支持这种方法,
但是如果el-input组件外面还有其他组件, 就会导致autofocus失效。
解决办法:
自定义指令
在全局定义一个自动获取焦点的自定义指令,在所有组件中都可以使用v-focus来自动获取焦点。
代码如下:
在main.js中定义全局指令
Vue.directive('focus', {
inserted: function(el) {
el.querySelector('input').focus();
}
});
在单组件中使用:
<el-input
v-focus // 自定义指令
v-if="item.isInput"
v-model="item.lineName"
placeholder="请输入标题"
@blur="saveTitle(item)" />
更多推荐
已为社区贡献17条内容
所有评论(0)