在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该怎么去做呢?接下来我们来看下。
如上图所示,elementUI的多选框是方框的,那么如果我们需要一个圆形的选择框的话,怎么办呢,这个时候我们第一时间想到的应该就是border-radius:50%;但是怎么往上加呢,我们接下来看一看
首先,我们需要选中要改变样式的组件,然后鼠标右键检查元素,找到该组件的类名,然后在style里面直接将该类名的样式进行修改就可以了,代码如下:
.el-checkbox__inner { // 对应的组件的类名
border-radius: 50%;
}
上面的这个方法已经可以改变组件的样式了,但是这里存在一个问题,在style里面改变的样式是全局的,也就是说,如果我们在其他页面里面也用到了这个组件的话,其他页面的样式也会被我们改变,显然这不是我们想要的,那么我们如何做到只改变相应的页面里面的组件样式呢?这时候我们就需要用到scoped这个属性了。
那么scoped的作用是什么呢?scoped是Vue里面style标签的一个特殊属性,当一个style标签拥有scoped属性的时候,就相当于说明它里面的样式只作用于当前这个Vue页面,不会污染到全局的样式,从而实现了组件样式的模块化,那么它是怎么实现的呢?其实如果我们给s