ElementUI更改Rate评分组件的图标大小以及评分最大值

最新推荐文章于 2024-05-17 13:19:50 发布
最新推荐文章于 2024-05-17 13:19:50 发布
阅读量8.6k 收藏 10
点赞数 10
分类专栏： 解决办法 文章标签： vue js css vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44042316/article/details/115177465
版权

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

在这里插入图片描述
图标太小了，尝试过设置宽高、行高、尺寸都没有用。于是打开浏览器调试，发现是用font-size设置的
在这里插入图片描述
于是在代码中给el-rate_icon改变font-size的值就可以了

这里注意这个class名是组件自带的，要在样式名称前加上/deep/提高优先级，不然不会生效

/deep/ .el-rate__icon{
  font-size: 35px;
}

设置完后，图标成功变大

在这里插入图片描述
修改评分最大值的方式要采用绑定的方式，效果如下：
在这里插入图片描述

智慧包
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
专栏目录
Element Rate 评分的使用方法
01-21
组件—评分 基础用法 <div class=block> <span class=demonstration>默认不区分颜色</span> <el v-model=value1></el> </div> <div class=block> <span class=demonstration>区分颜色</span> <el v-model=value2 colors=colors> </el> </div> [removed] export default { data() { return
:glowing_star:微信小程序评分组件
01-27
wechat-miniprogram-rate 微信小程序评分组件:glowing_star: 下载 git clone https://github.com/simsir-lin/wechat-miniprogram-rate.git 使用 安装 npm install --save wechat-miniprogram-rate 在你的页面json中添加 { "usingComponents": { "rate": "wechat-miniprogram-rate" } } 在wxml中即可使用组件 <rate></rate> 调试开发 打开，'本地小程序项目 - 添加项目'，项目目录选择为 miniprogram_dev 目录 安装依赖 npm install 构建命令 npm run dev 更多帮助信息查看 注意 小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300
仿制element-ui的Rate评分组件
前端老兵
07-02 3341
试着仿制了一下element-ui的Rate评分组件，废话不多说，直接上效果图上代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Rate评分，带辅助文字&lt;/title&gt; &lt;style&am
基于el-rate实现有多少分就显示多少⭐，并且分值紧跟最大⭐后面
m0_65448891的博客
01-31 416
基于el-rate实现有多少分就显示多少⭐，并且分值紧跟最大⭐后面。
el-rate 改变星星数量 改变星星对应的文字 改变星星大小
SiYuHuang_SCDN的博客
01-20 585
texts组件自带属性，自定义辅助文字，可以更换成想要的文字。:max 组件自带属性，设置最大星星数量。2.改变星星对应的文字。
el-rate更改星星大小
weixin_38345306的博客
10-28 2716
解析如下： **默认情况：****分析：****更改后** 默认情况： 默认情况下，星星较小，不符合预期 分析： 受font-size的控制 更改后 更改大小的方法： 添加样式 必须加/deep/，否则不生效 /deep/.el-rate__icon {//评分图标大小 font-size: 25px; } ...
如何更改ElementUI组件的图标大小以及标签属性
热门推荐
m0_70015558的博客
06-14 1万+
话不多说，直接上菜。ElementUI提供的Rate评分组件的默认大小是这样的图标太小了，想设置宽高、行高、尺寸，但代码不起作用。
elementUI修改组件样式不成功
xc_buxiangzhangda的博客
02-19 758
以下介绍三种方法，方法一和方法二原理一样，都是设为全局 1、方法一 2、方法二 使用/deep/使其变为全局的 如方法一前面要加限制，免得导致其他的地方被改变 3、如果是批量修改，则可以利用官网的自定义主题方式 ...
antd——rate评分组件 设置尺寸大小——基础积累
yehaocheng520的博客
06-16 2568
antd——rate评分组件 设置尺寸大小——基础积累
【element-ui其他icon笑脸评分使用方法，官方文档踩坑】
丁东的博客
05-19 1012
评分组件，因项目使用默认的星星样式不太适合当前需求，遂用到了笑脸评分的这个自定义icon。再查看页面效果，笑脸就出现了。前提： 使用elemen的。把源码下载并解压按照路径。
微信小程序评分组件
03-29
multiple-rate-wxapp 微信小程序评分组件 wxapp multiple rate component (此图片来源于网络，如有侵权，请联系删除! ) 下载 git clone https://github.com/simsir-lin/multiple-rate-wxapp.git 预览 打开微信web开发者工具，'本地小程序项目 - 添加项目'，项目目录选择为 multiple-rate-wxapp 的目录就可以了，添加项目后就可以进行组件源码的查看和预览demo了。使用 将 multiple-rate-wxapp 目录下的components文件夹下的multiple-r
Java项目:在线教学系统(java+SSM+VUE+ElementUI+Mysql)
05-07
项目介绍 基于SSM的在线网络教学系统 角色：管理员、用户 管理员：个人中心、 教师管理、学生管理、课程信息管理、教学信息管理、作业信息管理、作业评分管理 试卷管理、试题管理、管理员管理、学习论坛、系统管理 前台用户 登录注册、首页、学习论坛 、试卷列表 、网站公告 、个人中心、 后台管理等 教师：课程信息管理、教学信息管理、作业信息管理、作业评分管理等 环境需要 1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境：Tomcat 7.x,8.x,9.x版本均可 4.硬件环境：windows 7/8/10 1G内存以上；或者 Mac OS； 5.是否Maven项目: 否；查看源码目录中是否包含pom.xml；若包含，则为maven项目，否则为非maven项目 6.数据库：MySql 5.7/8.0等版本均可； 技术栈 后端：SSM(Spring+SpringMVC+Mybatis) 前端：ElementUI+Vue 使用说明 1. 使用Na
el-rate入门学习
qq_40765784的博客
06-02 1912
el-rate的入门使用和属性的概要说明
vue3封装elementplus评分组件
weixin_45441173的博客
11-05 801
vue3封装elementplus评分组件
Element el-rate 评分组件详解
程序员大阳
10-15 8364
本文目录1. 前言2. 基本用法3. 显示分值4. 辅助文本5. 只读6. 小结 1. 前言 评分组件主要使用在客户评价场景，例如客户对店铺进行打分。 本篇来介绍下评分组件的用法。 2. 基本用法 基本用法:{{value1}} <el-rate v-model="value1" @change="rateChange"> </el-rate> methods: { rateChange(value) { console.log(value
element 星级评分el-rate半星样式错位问题。
CCKing7的博客
04-20 569
通过font-size调整星星样式大小。
如何在 Element Plus 中使用自定义 icon 组件 (非组件库内置icon)
weixin_43191327的博客
01-18 2298
先说原理就是将svg文件以vue组件文件的方式使用需求：我想要在 Element Plus 得评分组件中使用自定义得图标。组件本身是支持自定义图标的，但是教程中只说明了如何使用图标库内置图标。如何使用自己的图标呢。先看下el-rate如何使用内置的自定义图标，
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
最新发布
博客
05-17 143
HTML,CSS,JavaScript,DOM的理解
element-ui rate评分组件
04-11
b'element-ui rate\xe8\xaf\x84\xe5\x88\x86\xe7\xbb\x84\xe4\xbb\xb6'是一个评分组件，可以用于对某个物品或服务进行评分。该组件使用简单且功能齐全，可以设置图标、颜色、步长等属性来定制评分的显示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值