lin-wx-ui

# Rate 评分

# 引入

在 app.json 或 index.json 中引入组件，详细介绍见快速上手

"usingComponents": {
  "lin-rate": "/dist/rate/index"
}

# 基础用法

通过value绑定值

代码示例 
<lin-rate data-key="value1" value="{ { value1 }}" bind:change="onChange" />

Page({
  data: {
    value1: 1,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 自定义图标

通过icon和voidIcon属性设置选中状态和未选中状态的图标

代码示例 
<lin-rate
  icon="like1"
  voidIcon="like1-o"
  data-key="value2"
  value="{ { value2 }}"
  bind:change="onChange"
/>

Page({
  data: {
    value2: 2,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 自定义样式

通过color和void-color属性设置选中和未选中的颜色

代码示例 
<lin-rate
  data-key="value3"
  value="{ { value3 }}"
  size="25px"
  color="rgb(255, 210, 30)"
  void-color="rgb(255, 210, 30)"
  bind:change="onChange"
/>

Page({
  data: {
    value3: 2,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 半星

通过allowHalf属性设置半星

代码示例 
<lin-rate
  data-key="value4"
  value="{ { value4 }}"
  allowHalf
  bind:change="onChange"
/>

Page({
  data: {
    value4: 2.5,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 自定义数量

通过count属性设置评分数量

代码示例 
<lin-rate
  data-key="value5"
  value="{ { value5 }}"
  count="{ { 8 }}"
  bind:change="onChange"
/>

Page({
  data: {
    value5: 2,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 禁用状态

通过disabled属性设置为禁用状态

代码示例 
<lin-rate
  data-key="value6"
  value="{ { value6 }}"
  disabled
  bind:change="onChange"
/>

Page({
  data: {
    value6: 2,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 只读状态

通过readonly属性设置为只读状态

代码示例 
<lin-rate
  data-key="value7"
  value="{ { value7 }}"
  readonly
  bind:change="onChange"
/>

Page({
  data: {
    value7: 2,
  },
  onChange(event) {
    const key = event.currentTarget.dataset.key;
    this.setData({
      [key]: event.detail,
    });
  },
});

# 属性

参数 说明 类型 可选值 默认值
gutter 图标间距，默认单位为 px String,Number — 4px
color 选中时的颜色 String — #ee0a24
voidColor 未选中时的颜色 String — #c8c9cc
allowHalf 是否允许半选 Boolean — false
iconSize 图标大小，默认单位为 px String, Number — 50rpx
value 当前分值 Number — —
count 图标总数 Number — 5
icon 选中时的图标名称 String — star1
voidIcon 未选中时的图标名称 String — star1-o
readonly 是否为只读状态 Boolean — false
disabled 是否禁用评分 Boolean — false
disabledColor 禁用时的颜色 String — #bdbdbd

# 事件

事件名 说明 参数
bind:change 当前分值变化时触发的事件 当前分值

# 外部样式类

类名 说明
custom-class 根节点样式类
icon-class 选中时图标样式类
void-icon-class 未选中时图标样式类

← Search 搜索 →