两种方式实现element-ui组件的样式

方案1:重置的公共组件样式的写法如下

然后在main.js中引入

import '@/assets/css/element.css'
 
方案2:每个.vue文件 - 组件的细节调整
<template>
 // 给根元素绑定一个id
    <div id="home">
    </div>
</template>
 
 在style标签里面分两种情况 参照链接地址:https://www.cnblogs.com/goloving/p/9119265.html
 
第一种 带scoped(dom和css具有hash值,也就是唯一标识)
 
因为scoped属性使得元素带有hash值,又因为element-ui组件的dom是动态生成的,所以css的hash值匹配不到dom元素上,所以使用>>>或者/deep/
 
(css的写法)
<style scoped>
#home  >>>  .el-button {
color:red;
}
</style>
 
(less的写法)
<style lang="less" scoped>
#about{
         /deep/ .el-button{
               color: violet;
               background: darkblue;
        }
}
</style>
 
第二种 不带scoped(和平常的写法一样)
 
<style>
#home   .el-button {
color:red;
}
</style>
 
 

Vue+element-ui 重置组件样式的写法的更多相关文章

  1. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  2. vue+element UI以组件递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  3. vue+element ui 表格自定义样式溢出隐藏

    样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...

  4. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  5. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. Javascript 对象 - 数组对象

    JavaScript核心对象 数组对象Array 字符串对象String 日期对象Date 数学对象Math 数组对象 数组对象是用来在单一的变量名中存储一系列的值.数组是在编程语言中经常使用的一种数 ...

  2. git 入门教程之分支管理

    背景 什么是分支?简单地说,分支就是两个相对独立的时间线,正常情况下,独立的时间线永远不会有交集,彼此不知道对方的存在,只有特定情况下,两条时间线才会相遇,因为相遇,所以相知,因为相知,所以改变! 正 ...

  3. 跨域调用接口的方法之一:$.ajaxSetup()

    跨域查询接口的数据,之前在公司时有发生过,产生的原因是,本地请求的域名或IP地址不一致,解除方法,也是修改域名和IP地址.比如: 接口中的数据来自IP地址:192.168.1.23/get.php 如 ...

  4. Charles 抓包手机app

    最近在测为移动端提供的API, 使用mac系统, 发现fiddler在mac下无法使用, 不知道其他朋友是否遇见过, 只能找替代工具. 先去百度上搜索下载Charles 破解版, 选择Charles是 ...

  5. mac 全角/半角标点符号切换

    快捷键:option+shift+H 背景是这样的,前段时间sublimeText新装了HTML/CSS/JS Prittify,JS代码格式化的快捷键是:command+shift+H. 记性有点差 ...

  6. 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有

    关于 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有 1. 2. 3. PS:是正餐后付的务必要选择口碑后付 完成以上设置即可

  7. linux下objdump应用

    <a href="http://www.maomao365.com/?p=952" > linux命令objdump的用法  http://www.maomao365. ...

  8. C#单问号(?)与双问号(??)

    1.单问号(?) 1.1 单问号运算符可以表示:可为Null类型,C#2.0里面实现了Nullable数据类型 //A.比如下面一句,直接定义int为null是错误的,错误提示为无法将null转化成i ...

  9. linux源

    系统:centos7 x86_64 一.配置本地yum源 1.1加载光驱 1.2挂载到系统 注:如果要长期使用最好把整个镜像文件拷贝到系统下 1.3配置文件 路径/etc/yum.repos.d/ 打 ...

  10. 登录views

    import osimport hashlibfrom django.shortcuts import render,render_to_response,redirect,HttpResponseR ...