AntDesignVue Rate 评分 实现五星好评功能

2024-06-18 11:36

本文主要是介绍AntDesignVue Rate 评分 实现五星好评功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

案例:基本用法

<script setup>
import {ref} from "vue";const value = ref()
</script>
<template><div class="p-8 bg-red-300 text-center"><a-rate v-model:value="value"/><a-divider/>{{ value }}</div>
</template>

案例:半颗星

核心:allow-half

支持给出四星半,三星半之类的半颗星的评价。

<script setup>
import {ref} from "vue";const value = ref()
</script>
<template><div class="p-8 bg-red-300 text-center"><a-rate v-model:value="value" allow-half/><a-divider/>{{ value }}</div>
</template>

案例:评价等级

核心::tooltips="desc"

<script setup>
import {ref} from "vue";const value = ref()
const desc = ref(["差评", "较差", "一般", "较好", "好评"])
</script>
<template><div class="p-8 bg-red-300 text-center"><a-rate v-model:value="value" :tooltips="desc"/><span class="ant-rate-text">{{ desc[value - 1]}}</span><a-divider/>{{ value }}</div>
</template>

案例:只读

核心:disabled

<template><a-rate :value="2" disabled />
</template>

案例:其他字符

<template><div><a-rate v-model:value="value1" allow-half><template #character><heart-outlined /></template></a-rate><br /><a-rate v-model:value="value2" character="A" allow-half style="font-size: 36px" /><br /><a-rate v-model:value="value3" character="" allow-half /><br /></div>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(2);
const value2 = ref(2.5);
const value3 = ref(0.5);
</script>

这篇关于AntDesignVue Rate 评分 实现五星好评功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071958

相关文章

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.