Back to Uni App

Rate 评分

src/uni_modules/uni-rate/readme.md

2.3.31.2 KB
Original Source

Rate 评分

评分组件,多用于购买商品后,对商品进行评价等场景

文件路径

项目下有一个 /pages/rate/rate.uvue 页面,里面演示了rate组件的各种用法。

设计

rate组件是投票评分使用的组件。它使用unicode字符实现,通过修改字体的样式,实现各种效果。

它分2个版本,一个版本是高性能版本,只有一层,不显示灰星,仅显示亮星,亮星不支持小数点,不能点击。适于长列表中显示。 另一个版本是普通版本,由背景灰星和前景亮星叠加而成,支持小程序点,支持点击。 这2个版本通过属性full来切换。

本组件支持v-model绑定响应式数据。

rate组件有如下属性:

  • full 是否显示全部5颗星。当黄色不够5星时,是否填充灰星以达到5星的固定长度。不填充灰星性能更高
  • readonly 是否响应点击变化。full属性为false时不生效,即无灰星时一定只读
  • plain 灰星是否镂空
  • star-class 星星的样式
  • star-style 星星的样式
  • star-active-class 选中的星星的样式
  • star-active-style 选中的星星的样式

rate组件有onChange事件,事件回调中会给出点击触发的新评分值。