位置:- 正文

如何更改ElementUI组件的图标大小以及标签属性(如何更改饿了么配送费)

编辑:rootadmin
如何更改ElementUI组件的图标大小以及标签属性

推荐整理分享如何更改ElementUI组件的图标大小以及标签属性(如何更改饿了么配送费),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何更改element默认字体大小,如何更改饿了么定位,如何更改饿了么头像,如何更改element默认字体大小,如何更改饿了么头像,如何更改element默认字体大小,如何更改饿了么默认支付方式,如何更改饿了么默认支付方式,内容如对您有帮助,希望把文章链接给更多的朋友!

话不多说,直接上菜。

ElementUI提供的Rate评分组件的默认大小是这样的

图标太小了,想设置宽高、行高、尺寸,但代码不起作用。

打开浏览器调试,发现是用font-size设置才有用。

如何更改ElementUI组件的图标大小以及标签属性(如何更改饿了么配送费)

由此代码存在优先级问题,要提高优先级。

css中使用>>>作深作用选择器:

于是在代码中给el-rate_icon和el-rate__text改变font-size的值就可以了, 要在样式名称前加上/deep/提高优先级。 

这里注意这个class名是组件自带的,不然不会生效。

 所以设置其它ElementUI组件的图标大小以及标签属性也是一样的。

其实还有一些其它方法:

1.直接把<style lang="less" scoped>中的scoped去掉就可以使样式生效,虽简单粗暴但却不是个很好的方法。

2.定义一个全局样式,如global.css,然后在main.js中导入,如此这个样式就全局挂载了,在其中写的自定义样式也会生效。

 描述如有错误,欢迎指正!

本文链接地址:https://www.jiuchutong.com/zhishi/287120.html 转载请保留说明!
下一篇链接:https://www.jiuchutong.com/zhishi/287121.html
免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络