修改a-rate评分颜色;a-rate评分十分制

news2024/11/26 22:51:52

使用ant-design-vue的rate评分组件
1。修改颜色
2。十分制(默认是5分,改成10分。且提示也是10分制)
在这里插入图片描述

<a-rate v-model="score" :tooltips="rate10" allow-half @hoverChange="changeRate" />

   data() {
		score: 7, // 分值乘以和除以 2 即可完成十分制
		rate10: ['2', '4', '6', '8', '10'],
	},

   created() {
     this.score = this.score / 2  // 回显除以2
     // this.score = this.score * 2  // 提交给后端乘以2
   },


	// 十分制提示
    changeRate(e) {
      console.log(e)
      if (Number.isInteger(e)) {
        this.rate10 = ['2', '4', '6', '8', '10']
      } else {
        this.rate10 = ['1', '3', '5', '7', '9']
      }
    },






css配色:(如果想做成不同评分渐变色,可以通过score的值来动态改变打分颜色;现在是固定配色)

// 打分颜色
::v-deep .ant-rate-star-full, ::v-deep .ant-rate-star-half  {
  color:#007d7b!important;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1186208.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

和xshell和crt说再见,认识了一款51k star多端跨平台终端神器,强大酷炫

一、Tabby简介 Tabby&#xff08;以前称为Terminus&#xff09;是一款高度可配置的终端仿真器、SSH 和串行客户端。开源且跨平台&#xff0c;支持在Windows、macOS和Linux系统下使用。 源码下载 https://github.com/Bill13579/tabby官网地址 https://tabby.sh/1. 特点 集成…

子查询:内查询,嵌套查询

括号里面的查询语句会先于主查询语句 create table info ( id int, name varchar(10) primary key not null, score decimal(5,2), address varchar(20), hobbid int(5) );select name,score from info where name in (select name from info where score > 80); 子查询返回…

【uniapp】通用列表封装组件

uniapp页面一般都会有像以下的列表页面&#xff0c;封装通用组件&#xff0c;提高开发效率&#xff1b; &#xff08;基于uView前端框架&#xff09; 首先&#xff0c;通过设计图来分析一下页面展示和数据结构定义 w-table组件参数说明 参数说明类型可选值默认值toggle列表是…

栈的应用:括号匹配,递归

目录 1.栈的应用1.括号匹配问题算法实现 2. 递归栈在递归中的应用 3.队列的应用 1.栈的应用 1.括号匹配问题 ①可用栈实现该特性&#xff1a;最后出现的左括号最先被匹配&#xff08;LIFO)。 ②出栈&#xff1a;每出现一个右括号&#xff0c;就“消耗”一个左括号。 ③匹配失败…

如何将 ONLYOFFICE 文档 7.5 与 Odoo 进行集成

在本教程中&#xff0c;我们将了解如何使用集成应用实现 ONLYOFFICE 文档与 Odoo 之间的连接。 ONLYOFFICE 文档是什么 ONLYOFFICE 文档是一款全面的在线办公工具&#xff0c;提供了文本文档、电子表格和演示文稿的查看和编辑功能。它高度兼容微软 Office 格式&#xff0c;包括…

Unity UGUI之Button控件的简单认识

Unity通过菜单或者Hierarchy面板创建Button,将会自动创建一个Image和Button控件&#xff0c;并且Transition属性默认选择Color Tint模式&#xff0c;除此之外还创建了个文本子对象。如下图所示&#xff1a; 而使用Inspector面板中Add Component只会创建Button控件。Transition属…

听说,工作能力强的项目经理都有这几个特征

大家好&#xff0c;我是老原。 很多项目经理每天忙忙碌碌&#xff0c;但是一看结果&#xff0c;团队业绩没有完成、人才没有培养起来、自己的管理水平和个人领导力也没有得到提升。 明明付出了很多时间和精力&#xff0c;结果却只收获了团队的抱怨&#xff0c;以及老板对你管…

UnoCss(原子化css引擎) 让你的开发更轻松愉快

什么是原子化CSS&#xff0c;UnoCSS又是什么&#xff0c;对此有疑问的推荐看下antfu的这篇文章——重新构想原子化 CSS (antfu.me) 相信看完这篇文章的你也会跟我一样热衷于UnoCSS. 介绍 今天介绍一个CSS开发利器 UnoCSS , 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎…

web框架与Django

web应用程序 什么是web Web应用程序是一种可以通过Web访问的应用程序&#xff0c;程序的最大好处是用户很容易访问应用程序&#xff0c;用户只需要有浏览器即可&#xff0c;不需要再安装其他软件 应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序&#xff0c;也就是说这…

ubuntu 18.04安装自己ko驱动 修改secure boot

因为本人老折腾自己的电脑&#xff0c;所以老重装系统&#xff0c;然后配置又不见了&#xff0c;这次配置赶紧记下来 insmod netlink_test.ko 报错&#xff1a;insmod: ERROR: could not insert module netlink_test.ko: Operation not permitted 添加 sudo insmod netlink_te…

C++跨模块传递CRT引发问题

SDK新增加了一个接口&#xff0c;参数使用std::vector<Class>&&#xff0c;传给dll函数中填充数值&#xff0c;然后应用层拿到这个vector出现了崩溃 越界等问题&#xff0c;调了很久&#xff0c;之前知道这个问题&#xff0c;没有想起来&#xff0c;耽误了许多时间。…

kubernetes资源监控

目录 一、资源限制 1、limitrange 2、ResourceQuota 二、metrics-server 三、图形化监控和代码行监控 1、dashboard 2、k9s 四、hpa 一、资源限制 Kubernetes采用request和limit两种限制类型来对资源进行分配。request(资源需求)&#xff1a;即运行Pod的节点必须满足运…

用友NC Cloud accept.jsp任意文件上传漏洞

一、漏洞描述 NC Cloud是用友推出的大型企业数字化平台。 用友网络科技股份有限公司NC Cloud存在任意文件上传漏洞&#xff0c;攻击者可利用该漏洞获取服务器控制权。 二、网络空间搜索引擎查询 fofa查询 icon_hash"1085941792" 三、漏洞复现 POC POST /aim/equi…

Linux程序设计shell程序学习

目录 1、编写shell脚本&#xff0c;通过循环的形式在终端上打印出等腰梯形 2、编写一个bash脚本程序&#xff0c;用for循环实现将当前目录下的所有.c文件移到指定的目录下&#xff0c;最后在显示器上显示指定目录下的文件和目录。 3、自行编写 shell 脚本&#xff0c;实现从…

Linux防火墙firewalld(粗糙版)

上篇是iptables的增删改查 自定义链&#xff1a; systemctl stop firewalld setenforce 0 iptables -N lmn iptables -vnL iptables -t filter -vnL 修改链名&#xff1a; iptables -E lmn ky01 iptables -t filter -vnL iptables -t filter -I ky01 -p icmp -j ACCEP…

RHCSA --- Linux命令替换

命令替换 把命令中某个子命令替换为其执行结果 $() echo "The current directory is $(pwd)." touch ./file$(date %H-%M-%S).txt 以文件创建时间并以相应格式命名文件 date 显示时间 echo "The current direct…

VueCli 自定义创建项目及配置

一、VueCli 自定义创建项目 1.安装脚手架 (已安装) npm i vue/cli -g2.创建项目 vue create hm-exp-mobile选项 Vue CLI v5.0.8 ? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint) > Manually select features 选自定义手动…

12.输入一个小于1000的整数,输出平方根(不是整数,输出整数部分)

#include<stdio.h> #include<math.h>int fun(int n){int b;b pow(n,0.5);printf("%d",b);}int main(){int n;scanf("%d",&n); fun(n);return 0;}

什么是代理IP池?真实测评IP代理商的IP池是否真实?

代理池充当多个代理服务器的存储库&#xff0c;提供在线安全和匿名层。代理池允许用户抓取数据、访问受限制的内容以及执行其他在线任务&#xff0c;而无需担心被检测或阻止的风险。代理池为各种在线活动&#xff08;例如网页抓取、安全浏览等&#xff09;提高后勤保障。 读完…

毫米波雷达在环境监测中的应用:气象学和气候研究的前沿技术

随着气候变化和环境问题的日益突出&#xff0c;科学家们正在寻找更先进的技术来监测大气和气候变化。毫米波雷达技术正崭露头角&#xff0c;成为气象学和气候研究领域的一项重要工具。本文将探讨毫米波雷达在环境监测中的应用&#xff0c;特别聚焦于其在气象学和气候研究方面的…