vue+Elment-UI,修改element组件样式
在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该怎么去做呢?接下来我们来看下。
如上图所示,elementUI的多选框是方框的,那么如果我们需要一个圆形的选择框的话,怎么办呢,这个时候我们第一时间想到的应该就是border-radius:50%;但是怎么往上加呢,我们接下来看一看
首先,我们需要选中要改变样式的组件,然后鼠标右键检查元素,找到该组件的类名,然后在style里面直接将该类名的样式进行修改就可以了,代码如下:
<style>
.el-checkbox__inner { // 对应的组件的类名
border-radius: 50%;
}
</style>
上面的这个方法已经可以改变组件的样式了,但是这里存在一个问题,在style里面改变的样式是全局的,也就是说,如果我们在其他页面里面也用到了这个组件的话,其他页面的样式也会被我们改变,显然这不是我们想要的,那么我们如何做到只改变相应的页面里面的组件样式呢?这时候我们就需要用到scoped这个属性了。
那么scoped的作用是什么呢?scoped是Vue里面style标签的一个特殊属性,当一个style标签拥有scoped属性的时候,就相当于说明它里面的样式只作用于当前这个Vue页面,不会污染到全局的样式,从而实现了组件样式的模块化,那么它是怎么实现的呢?其实如果我们给style标签加上了scoped属性,在编译的时候,他会给我们组件里面的每一个样式加一个自定义的属性data-v-5558821a,从而通过给含有这个自定义属性的标签加上样式,从而实现了部分样式的穿透。所以我们只需要这样:
<style scoped>
.edit_dev >>> .el-checkbox__inner { // 这里我们要注意,想要修改组件样式的话,必须先用一个原生标签将这个组件包起来,然后通过父查子的方式来找到组件的类,注意这里的>>>是不可少的,要通过这个来查找
border-radius: 50%;
}
</style>
当然这里还有另外一个方法,就是通过less以及sass的方式来实现穿透,代码如下:
<style scoped lang="less">
.edit_dev {
/deep/ .el-checkbox__inner{ // less语法要通过/deep/ 来找到子级的类
border-radius: 50%;
}
}
</style>
以上三种方法都是可以实现改变element组件样式的,大家可以根据自己的实际情况来进行选取。
最新文章
- MyEclipse10--的使用经验
- python3 linux下安装
- centOs安装jdk1.7
- Android图片加载库:最全面的Picasso讲解
- leetcode 100 Same Tree ----- java
- UI表单
- 为了解决这个问题:07文本WORD文档超链接、页码成{HYPERLINK&;quot;网站&;quot;}、{PAGE}/{NUMPAGES}
- 分布式开放消息系统(RocketMQ)的原理与实践(转)
- beta冲刺4-咸鱼
- 最简单的基于DirectShow的示例:视频播放器图形界面版
- spring多模块项目手动整合
- <;web-view>;中JSSDK
- Visual Studio Many Projects in One Solution VS中多工程开发
- Linux学习笔记《六》
- POJ 2407 Relatives (欧拉函数)
- golang fmt占位符
- 用pyqt5做一个能python程序能插入图片的ide
- 动词的时态(Les temps du verbe )
- Mac OS 10.12 - ”ln: /usr/bin/tclsh: Operation not permitted“错误的解决方法!!
- 马婕 2014MBA专硕考试 报刊选读 7 美国的欧洲时刻(转)