# Rate 评分

请扫码查看示例

# 介绍

用于对事物进行评级操作。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-rate" src="@/node_modules/mui-minix/src/rate/index"></element>
<m-rate value="{{v2}}" @m-change="onChange"></m-rate>

1
2

export default {
  data(){
    return {
      v2: 2
    }
  },
  onChange(e){
    this.v2 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10

# 自定义大小

通过设置 item-size 属性可以评分的大小。默认为 28px

<element name="m-rate" src="@/node_modules/mui-minix/src/rate/index"></element>
<m-rate value="{{v4}}" item-size="{{32}}" @m-change="onChange"></m-rate>

1
2

export default {
  data(){
    return {
      v4: 4
    }
  },
  onChange(e){
    this.v2 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10

# Api

# Prop

字段	说明	类型	默认值	是否必须
`value`	当前值	`number`	`0`	`是`
`count`	评分项的个数	`number`	`5`	`否`
`item-size`	评分项的大小	`number`	`28`	`否`
`gutter`	评分项之间的间隙	`number`	`0`	`否`
`icon`	未选中时评分项的图标	`string`	`star`	`否`
`active-icon`	选中时评分项的图标	`string`	`star-fill`	`否`
`disabled`	禁用	`boolean`	`false`	`否`
`readonly`	是否只读	`boolean`	`false`	`否`

# Events

名称	说明	回调参数
`m-change`	点击时触发	`value: number`