评分 Rate

提供评分能力。

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-rate": "@titian-design/weapp/rate/index"
  },
  // titan-cli 搭建的项目
  "usingComponents": {
    "ti-rate": "platform://titian-mp/ti-rate"
  }
}

用法示例

基本使用

copy

code

<ti-rate value="{{3}}" />

只读

copy

code

<ti-rate value="{{3}}" readOnly />

设置星级

copy

code

<ti-rate value="{{3}}" count="{{7}}" clearable />

评星尺寸

copy

code

<ti-rate value="{{3}}" iconSize="{{60}}" />

半星

copy

code

<ti-rate value="{{3.5}}" allowHalf />

可清空

copy

code

<ti-rate value="{{3}}" clearable />

设置间距

copy

code

<ti-rate value="{{3}}" extStyle="--rate-gap: 20px;" />

绑定事件

copy

code

<ti-rate value="{{value}}" bind:change="onChangeHandler" />

ti-rate API

属性 Properties

属性	类型	默认值	说明
value	number	0	值
allow-half	boolean	false	允许半星
clearable	boolean	false	可清空
count	number	5	评分数量
icon	string	rate-star-highlight	评分 icon 图标
icon-size	string | number	theme.fontSize.t10	评分 icon 图标尺寸
empty-icon	string	rate-star-highlight	评分 icon 未选中图标
read-only	boolean	false	是否只读

事件 Events

名称	参数列表	描述	备注
bind:change	(e: WechatMiniprogram.CustomEvent<{value: number}>) => void	评分变化时触发该事件	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--rate-gap	theme.spacing.gap.g6	评星间距	-
--rate-color	theme.color.brand.1000	评分选中颜色	-
--rate-empty-color	theme.color.gray.background.100	评星未选中颜色	-