uView Rate 评分

简介: uView Rate 评分

该组件一般用于满意度调查,星型评分的场景。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过count参数设置总共有多少颗星星可选择
  • 通过v-model双向绑定初始化时默认选中的星星数量
<template>
  <u-rate :count="count" v-model="value"></u-rate>
</template>
<script>
  export default {
    data() {
      return {
        count: 4,
        value: 2
      }
    }
  }
</script>

copy

#自定义样式

  • 通过active-color设置选中的星星的颜色
  • 通过inactive-color设置未选中时星星的颜色
  • 通过gutter设置星星的间距,左右内边距各占gutter的一半
<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>

copy

#自定义图标

  • 通过active-icon设置激活的图标
  • 通过inactive-icon设置未激活的图标

下方示例为使用心形图标替代默认的星星图标:

<u-rate activeIcon="heart-fill" inactiveIcon="heart"></u-rate>

copy

#最少选中的数量

<u-rate :minCount="5"></u-rate>

copy

#禁用状态

禁用下,无法点击或者滑动选择,但是可以通过value设置默认选中的数量,禁用状态下用来展示分数,允许出现半星

<u-rate :value="3.7" disabled></u-rate>

copy

#只读状态

只读下,无法点击或者滑动选择,但是可以通过value设置默认选中的数量,禁用状态下用来展示分数,允许出现半星

<u-rate :value="3.7" readonly></u-rate>
目录
打赏
0
相关文章
Element el-rate 评分组件详解
本文目录 1. 前言 2. 基本用法 3. 显示分值 4. 辅助文本 5. 只读 6. 小结
2736 0
Element el-rate 评分组件详解
Vue3评分(Rate)
这是一个基于 Vue 3 的评分组件 `Rate.vue`,支持多种自定义设置,包括是否允许清除、半选状态、星星总数、字符样式、字符大小、选中颜色、字符间距及是否禁用等。组件内置四种 SVG 图标,并允许使用自定义字符。通过 `v-model:value` 实现双向绑定,并提供了 `change` 和 `hoverChange` 事件回调。 组件演示了不同的使用场景,如禁用状态、不同形状的图标、自定义字符和颜色等。同时提供了一个评分配置器,可以动态调整各项参数以满足不同需求。在线预览效果展示了各种配置下的评分显示样式。
Vue3评分(Rate)
vue element plus Rate 评分
vue element plus Rate 评分
170 0
232Echarts - 3D 柱状图(Noise modified from marpi's demo)
232Echarts - 3D 柱状图(Noise modified from marpi's demo)
46 0
232Echarts - 3D 柱状图(Noise modified from marpi's demo)
69Echarts - 散点图(Air Quality - Baidu Map)
69Echarts - 散点图(Air Quality - Baidu Map)
32 0
使用Python实现Hull Moving Average (HMA)
赫尔移动平均线(Hull Moving Average,简称HMA)是一种技术指标,于2005年由Alan Hull开发。它是一种移动平均线,利用加权计算来减少滞后并提高准确性。
420 0
2022亚太建模B题Optimal Design of High-speed Train思路分析
2022亚太建模B题思路分析高速列车的优化设计 Optimal Design of High-speed Train
2022亚太建模B题Optimal Design of High-speed Train思路分析
Google Earth Engine(GEE)——MOD10A1 V6 Snow Cover Daily Global 500m积雪、积雪反照率、部分积雪和质量评估 (QA) 数据
Google Earth Engine(GEE)——MOD10A1 V6 Snow Cover Daily Global 500m积雪、积雪反照率、部分积雪和质量评估 (QA) 数据
348 0
Google Earth Engine(GEE)——MOD10A1 V6 Snow Cover Daily Global 500m积雪、积雪反照率、部分积雪和质量评估 (QA) 数据
(0)global_step学习率衰减用法
主要是用在梯度下降中的学习率问题上,设置学习率的大小, 是在精度和速度之间找到一个平衡:
159 0