一个关于vue+element-ui打包样式污染的问题

最新推荐文章于 2024-03-12 21:53:30 发布

weixin_48722827

最新推荐文章于 2024-03-12 21:53:30 发布

阅读量306

点赞数 1

文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_48722827/article/details/131471232

版权

因为是二次开发得到项目有一些莫名其妙的问题找不到原因，上网搜了很久都是有关避免写的样式污染其他页面没有我遇到的这种情况

一开始是使用的行内样式，因为行内的权重比较高，但是打包上线之后通过控制台发现这个input的样式是 .el-select>.el-input:width:140px; 这就很恶心

            <el-col :span="12">
              <el-form-item label="类型" prop="wellType">
                <el-select
                  styel="width:220px"
                  v-model="form.wellType"
                  placeholder="选择类型"
                  :filterable="true"
                  :clearable="true"
                >
                  <el-option
                    v-for="(item, index) in TypeList"
                    :label="item.name"
                    :value="item.name"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

再后来就想着给他加一个单独的类名再进行样式设置

            <el-col :span="12">
              <el-form-item label="类型" prop="wellType">
                <el-select
                  class="inpp"
                  v-model="form.wellType"
                  placeholder="选择类型"
                  :filterable="true"
                  :clearable="true"
                >
                  <el-option
                    v-for="(item, index) in TypeList"
                    :label="item.name"
                    :value="item.name"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>


<style>
.inpp>.el-input__inner{
  width: 220px !important;
}
.inpp>.el-input{
  width: 220px !important;
}
</style>

因为再控制台看到的需要改变样式的标签为el-input 和 el-input_inner 还有就是前面的自定义类名可以有效的防止样式污染，因为没有找到污染这个标签的污染源我怕权重不够就又给他加了一个！important

之后就是打包上线了上线之后发现问题已经解决，