vue中一个关于input输入框select事件的小坑

1、场景

最近公司开发网盘系统时，一个常见的需求。选中文件夹，点击重命名时，input输入框自动获取焦点同时默认选中文字。 一个简单的模拟如下。

开撸代码如下，设置一个布尔值bl，当bl为true时，禁用输入框，同时去掉输入框的边框，给用户的感觉，此处只是一个普通的span标签。代码如下。

很简单一个功能，Ctrl+S保存代码，打开浏览器，却发现根本没有出现预期效果。

2、bug产生原因

重新理解上面代码，当bl为true时，点击重命名bl为false此时是先执行rename中的代码this.bl === false?el.select():''然后才是视图中input的disabled变为flase。因此出现问题。即执行this.bl === false?el.select():''这行代码时，视图中的input依然为disable=true，还没有更新为false，而input被禁用时select()事件时不能触发的，因此出现问题。

3、解决方法。

3.1自定义指令的方法。如下

3.2更简单的方法

3.2.1将this.bl === false?el.select():''放在this.$nextTick(() => {}中

3.2.2直接把this.bl === false?el.select():''放在一个setTimeout也能简单粗暴的解决。

。由于公司的网盘项目中此种场景较多，所以此处我选择的是自定义指令的方法，直接全局注册一次。

4、一个更有意思的发现

刚开始查找原因时发现在ie中即使是一开始的写法，也能实现功能。查找资料发现，在ie中select()事件，即使是在input框disabled时，也是可以触发的。因此才会出现ie中可以实现功能的现象。