1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 改变elementui卡片crad样式_vue+Elment-UI 修改element组件样式

改变elementui卡片crad样式_vue+Elment-UI 修改element组件样式

时间:2022-01-02 02:59:42

相关推荐

改变elementui卡片crad样式_vue+Elment-UI 修改element组件样式

在用vue开发项目过程中,我们总是避免不了的会使用到elementUI,它里面提供的一些组件都为我们的开发带来了很大的便利,但是,当有时候我们需要使用这些组件的同时又要修改下组件的UI样式的话,我们该怎么去做呢?接下来我们来看下。

如上图所示,elementUI的多选框是方框的,那么如果我们需要一个圆形的选择框的话,怎么办呢,这个时候我们第一时间想到的应该就是border-radius:50%;但是怎么往上加呢,我们接下来看一看

首先,我们需要选中要改变样式的组件,然后鼠标右键检查元素,找到该组件的类名,然后在style里面直接将该类名的样式进行修改就可以了,代码如下:

.el-checkbox__inner { // 对应的组件的类名

border-radius: 50%;

}

上面的这个方法已经可以改变组件的样式了,但是这里存在一个问题,在style里面改变的样式是全局的,也就是说,如果我们在其他页面里面也用到了这个组件的话,其他页面的样式也会被我们改变,显然这不是我们想要的,那么我们如何做到只改变相应的页面里面的组件样式呢?这时候我们就需要用到scoped这个属性了。

那么scoped的作用是什么呢?scoped是Vue里面style标签的一个特殊属性,当一个style标签拥有scoped属性的时候,就相当于说明它里面的样式只作用于当前这个Vue页面,不会污染到全局的样式,从而实现了组件样式的模块化,那么它是怎么实现的呢?其实如果我们给s

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。