使用element-ui的upload组件时.el-upload__input样式出错的解决办法

使用element-ui的upload组件时.el-upload__input样式出错的解决办法

错误复现：

这个样式错误折磨了我一下午！得记录一下。

这个样式突然出现问题，基本解决办法有两种。一种是往样式方向去想，另一个是往你使用的插件里去想(样式冲突)。我就属于后者，还得多亏那位在CSDN里提醒我的大兄弟。

选择该DOM结点，会发现他有两个选择器对他的样式进行操控。

我试着修改样式

.upload .el-upload__input {
  display: none;
}

input[type="file"] {
  display: none !important;
}

这些方法我都试了也没有用(如果你没有受到其他插件的影响应该是到这里就可以解决了)

问题解决：

后来发现自己在项目中引用了bootstrop框架，这才想到可能样式冲突，我就把引入样式的代码进行了删除，发现的确可行。

<style scoped>
@import "@/assets/js/bootstrap-3.4.1-dist/css/bootstrap.min.css";
</style>

删除后，问题果然解决：