vue工程ie11浏览器输入框无法输入中文,原因竟然是...

发现问题

由于历史原因,系统需要兼容 ie11 浏览器,然而在 ie11 环境下突然发现一件非常奇怪的事情,输入法切换为了中文,但是在系统的输入框中输入的却是英文,控制台中没有报任何错误;而在谷歌等现代浏览器却一切正常。

尝试解决

网络上搜索到一些答案,有说是输入法问题的,有说可以尝试设置一下ime-mode css属性... 但是一一尝试过后都无法解决。

问题定位

后来,发现并非所有的输入框都是这种现象。由于我们部分的页面是通过低代码平台进行开发的,页面通过页面描述json数据进行渲染,json中对应的组件是通过vue的component动态组件动态加载的。而通过component组件渲染出的input是有这种问题,其它的input并没有问题。那会不会是这个component组件影响到了中文的输入呢?

经过排查我们定位到了component的属性上面。由于低代码页面设计器上可以控制组件的是否可用属性,我们在component组件上传递了一个disabled属性,当属性值为true时,就出现上文中的现象。

<template>
  <div>
    <component v-bind:is="'com-a'" :disabled="true"></component>
  </div>
</template>
<script>
import ComA from "./ComA";
export default {
  components: {
    ComA,
  }
}

// ComA.vue
<template>
  <div>
    <input />
  </div>
</template>
<script>
export default {
  name: "ComA",
};
</script>
复制代码

有研究过vue动态源码的小伙伴吗?这是什么原因造成的呢?

分类:
前端
标签: