脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue修改ElementUI组件内样式

使用vue深度选择器修改ElementUI组件内样式的示例代码

 更新时间：2022年12月07日 14:18:08   作者：喵酱爱吃鱼  
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错，下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下

例子：el-collapse标签修改子组件样式

在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。

<style lang="scss" scoped>
.collapse1 {
  /deep/ .el-collapse-item__content {
    padding: 0px 5%;
    background: #fff;
  }

  /deep/ .el-collapse-item__header {
    padding: 0px 5%;
    background: #fff;
  }
}
 </style>

scss使用：

<style lang="scss" scoped>
.collapse1 {
  ::v-deep .el-collapse-item__content {
    padding: 0px 5%;
    background: #fff;
  }

  ::v-deep .el-collapse-item__header {
    padding: 0px 5%;
    background: #fff;
  }
}
 </style>

注意：在vue中，>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep

<-- 放上去就行了 -->
　　　　<el-collapse class="collapse1" v-model="...">
          <el-collapse-item v-for="(item,index) in ..." :name="index">
            <template slot="title">
              {{ item.... }}{{ index }}
            </template>
          </el-collapse-item>
        </el-collapse>

 注：el-collapse-item__header等类名在浏览器开发者工具中的Elements找到

vue使用element ui

第一步：

npm install element-ui --save

第二步：

主要代码（安装完成后在 main.js 添加全局引用）：

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

第三步：

element ui官网找组件引用。

到此这篇关于使用vue深度选择器修改ElementUI组件内样式的文章就介绍到这了,更多相关vue修改ElementUI组件内样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论