# rate 评分

评分组件

# 初始化

单独引用时：从入口的js文件引入

import { SsRate } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(SsRate)

1
2
3

# 效果

# 基础型

<div class="block">
    <span class="demonstration">默认不区分颜色</span>
    <ss-rate v-model="valueColor"></ss-rate>
</div>
<div class="block">
    <span class="demonstration">区分颜色</span>
    <ss-rate v-model="valueNocolor" :colors="colors"></ss-rate>
</div>  

<script>
  export default {
    data() {
      return {
        valueColor: null,
        valueNocolor: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] 
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 带文字

<ss-rate v-model="value" show-text :texts="texts" ></ss-rate>

<script>
  export default {
    data() {
      return {
        value: null,
        texts:['很差','不好','一般','很棒','太棒了']
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 带评分

<ss-rate v-model="valueScore" disabled show-score text-color="#ff9900" score-template="{value}"></ss-rate>

<script>
  export default {
    data() {
      return {
        valueScore: 4.5,
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11

# 参数

参数	说明	类型	默认值	可选值
value	绑定值	number	0	-
max	最大分值	number	5	-
disabled	是否为只读	boolean	false	-
allow-half	是否允许半选	boolean	false	-
color	icon的颜色，一共有三个元素，为3个阶段对应的颜色	boolean	false	-
void-color	未被选中的颜色	string	#C6D1DE	-
iocn-classes	icon的类名，一共有三个元素，为3个阶段对应的图标	string	#C6D1DE	-
show-text	是否显示辅助文字	boolean	false	-
show-score	是否显示分数	boolean	false	-
text-color	辅助文字的颜色	string	#1F2D3D	-
texts	辅助文字数组	array	['极差','失望','一般','满意','惊喜']	-
score-template	分数显示模板	string	{value}	-

# 事件

事件名称	说明	回调参数
change	分值改变的时候触发	改变后的分值

← Dialog 对话框 datePicker日期选择器 →