记一次VUE中使用Element-UI样式失效问题

最新推荐文章于 2024-11-18 15:12:32 发布

原创最新推荐文章于 2024-11-18 15:12:32 发布 · 965 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript

文章讲述了在Vue项目中使用Element-UI时，由于scoped属性导致Element-UI组件样式失效的问题，原因在于scoped限制了全局样式穿透，给出了移除scoped或调整CSS选择器的解决方案。

记一次VUE中使用Element-UI样式失效问题

做练习时发现自己从element-ui上复制下来的样式没有生效，代码如下。

  <el-form-item label="图片">
    <el-upload
      ref="picUpload"
      class="avatar-uploader"
      accept=".png,.jpg"
      action=""
      :show-file-list="false"
      :on-remove="removePic"
      :on-change="choosePic"
      :limit="1"
      :auto-upload="false"
    >
      <img v-if="picFileInfo" :src="picFileInfo.url" class="avatar" />
      <img v-else-if="form.image" :src="form.image" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <div slot="tip" class="el-upload__tip" style="color:red">
        只能上传png/jpg文件
      </div>
    </el-upload>
  </el-form-item>


<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

效果对比如下：

在这里插入图片描述

经过网上查询资料发现是因为在<style>标签中加入了scoped属性，scoped 属性仅对单文件组件（.vue 文件）有效，对于全局的样式（如引入的第三方库的样式），不会受到 scoped 属性的影响。这是因为 Element UI 组件的样式是通过类似于 /deep/ 或者 ::v-deep（Vue 2.x）的选择器来实现的样式穿透，而不是依赖于 CSS 的作用域限定。

在 Vue 2.x 版本中，如果给 <style> 标签添加 scoped 属性，会导致 Element UI 组件中的样式选择器无法穿透到组件内部，从而无法正常应用样式。因此，使用 scoped 属性可能会导致 Element UI 组件的样式失效。

根据上述解决方案进行代码修改

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

结果展示:
在这里插入图片描述