脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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组件内样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vant时间控件使用方法详解

    vant时间控件使用方法详解

    这篇文章主要为大家详细介绍了vant时间控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue集成TinyMCE富文本编辑器的流程步骤

    Vue集成TinyMCE富文本编辑器的流程步骤

    TinyMCE 是一款功能强大的富文本编辑器,广泛应用于各种 Web 应用中,本文将详细介绍如何在 Vue 项目中集成 TinyMCE,通过详尽的步骤说明、示例代码展示以及丰富的配置选项,助力开发者轻松实现内容编辑的增强与美化,需要的朋友可以参考下
    2024-11-11
  • vue: WebStorm设置快速编译运行的方法

    vue: WebStorm设置快速编译运行的方法

    今天小编就为大家分享一篇vue: WebStorm设置快速编译运行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • vuex直接赋值的三种方法总结

    vuex直接赋值的三种方法总结

    今天小编就为大家分享一篇vuex直接赋值的三种方法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于vue项目设置resolves.alias: ''@''路径并适配webstorm

    基于vue项目设置resolves.alias: ''@''路径并适配webstorm

    这篇文章主要介绍了基于vue项目设置resolves.alias: '@'路径并适配webstorm,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • 基于Vue方法实现简单计时器

    基于Vue方法实现简单计时器

    这篇文章主要为大家详细介绍了基于Vue方法实现简单计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 使用vue-cli4.0快速搭建一个项目的方法步骤

    使用vue-cli4.0快速搭建一个项目的方法步骤

    这篇文章主要介绍了使用vue-cli4.0快速搭建一个项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Mac下安装vue

    Mac下安装vue

    本文给大家详细介绍了Mac下安装vue的方法，本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • vue中拆分组件的实战案例

    vue中拆分组件的实战案例

    最近在学vue,试着写个单页应用,在写组件,拆分组件时遇到一些困惑,下面这篇文章主要给大家介绍了关于vue中拆分组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue3+vite+axios 配置连接后端调用接口的实现方法

    vue3+vite+axios 配置连接后端调用接口的实现方法

    这篇文章主要介绍了vue3+vite+axios 配置连接后端调用接口的实现方法，在vite.config.ts文件中添加配置，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论