Star 星级评分
用法
基础用法
通过传递value值，来显示多少个星。
👆 👆 👆你可以用鼠标在上面滑动观看试试效果。
<star :value="1" :size="20"/>
不同的颜色
通过传递color，来实现不同颜色的星级评分组件。
默认颜色#ff9900
自定义颜色#58a
自定义颜色#f60
<!-- 默认 -->
<star :value="1" :size="40" />
<!-- 自定义 -->
<star :value="2" :size="40" color="#58a" />
<!-- 自定义 -->
<star :value="3" :size="40" color="#f60"/>
不同的大小
通过传递size，单位是px，来控制不同大小的星级评分。
20px大小
30px大小
40px大小
<!-- 20px -->
<star :value="3" :size="20" />
<!-- 30px -->
<star :value="3" :size="30" />
<!-- 40px -->
<star :value="3" :size="40" />
不同个数的星星
通过传递max，默认是5个，来控制显示多少个星。
3个星
5个星
10个星
<!-- 3个星 -->
<star :value="3" :size="20" :max="3" />
<!-- 5个星 -->
<star :value="3" :size="20" :max="5" />
<!-- 10个星 -->
<star :value="3" :size="20" :max="10" />
辅助文字
分值
通过传递showValue，默认值是false，来控制是否显示评分的分值。
3
默认不显示分值
显示分值
<!-- 默认不显示分值 -->
<star :value="3" :size="20" />
<!-- 显示分值 -->
<star :value="3" :size="20" :show-value="true"/>
评分描述
通过showText，默认值false，来控制显示相关评分描述。
一般
默认不显示评分描述
显示评分描述
<!-- 不显示评分描述 -->
<star :value="3" :size="20" />
<!-- 显示评分描述 -->
<star :value="3" :size="20" :show-text="true"/>
评分描述内容
通过传递texts，默认值['极差', '失望', '一般', '满意', '惊喜']，来控制具体要显示的评分描述内容。
一般
默认评分描述内容
自定义评分描述内容
<star :value="3" :size="20" />
<star :value="3" :size="20" :show-text="true" :texts="texts"/>
export default {
data () {
return {
texts: ['恶劣', '不满意', '一般', '满意', '超棒']
}
}
}
只读
通过传递disabled，默认值为false，来控制评分组件是否为只读。
默认非只读
只读模式
<!-- 默认非只读 -->
<star :value="3" :size="20" />
<!-- 只读 -->
<star :value="3" :size="20" :disabled="true"/>
属性
| 属性名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | [Number, String] | 0 | 评分组件的值 |
| size | [Number, String] | 14px | 评分组件的大小 |
| max | Number | 5 | 评分组件多少个星 |
| color | String | #ff9900 | 评分组件的颜色 |
| textColor | String | #ff9900 | 评分组件辅助文字的颜色 |
| disabled | Boolean | false | 评分组件是否只读，只读模式下不触发change事件 |
| showValue | Boolean | false | 是否显示分值 |
| showText | Boolean | false | 是否显示评分描述 |
| texts | Array | ['极差','失望','一般','满意','惊喜'] | 评分描述内容 |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 非disabled状态点击时触发 | 改变后的分值 |
change事件
非disabled状态下分值改变时触发此事件，参数为改变后的分值
示例：
<star :value="4" @change="handleStarChange"></star>
export default {
methods: {
// 评分组件值更新事件
handleStarChange (value) {
console.log(value)
}
}
}