star.md

Star 星级评分

用法

基础用法

::: tip 通过传递value值，来显示多少个星。 :::

👆 👆 👆你可以用鼠标在上面滑动观看试试效果。

<star :value="1" :size="20"/>

不同的颜色

::: tip 通过传递color，来实现不同颜色的星级评分组件。 :::

默认颜色#ff9900

自定义颜色#58a

自定义颜色#f60

<!-- 默认 -->
<star :value="1" :size="40"  />
<!-- 自定义 -->
<star :value="2" :size="40" color="#58a" />
<!-- 自定义 -->
<star :value="3" :size="40" color="#f60"/>

不同的大小

::: tip 通过传递size，单位是px，来控制不同大小的星级评分。 :::

20px大小

30px大小

40px大小

<!-- 20px -->
<star :value="3" :size="20" />
<!-- 30px -->
<star :value="3" :size="30" />
<!-- 40px -->
<star :value="3" :size="40" />

不同个数的星星

::: tip 通过传递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" />

辅助文字

分值

::: tip 通过传递showValue，默认值是false，来控制是否显示评分的分值。 :::

默认不显示分值

显示分值

<!-- 默认不显示分值 -->
<star :value="3" :size="20" />
<!-- 显示分值 -->
<star :value="3" :size="20" :show-value="true"/>

评分描述

::: tip 通过showText，默认值false，来控制显示相关评分描述。 :::

默认不显示评分描述

显示评分描述

<!-- 不显示评分描述 -->
<star :value="3" :size="20" />
<!-- 显示评分描述 -->
<star :value="3" :size="20" :show-text="true"/>

评分描述内容

::: tip 通过传递texts，默认值['极差', '失望', '一般', '满意', '惊喜']，来控制具体要显示的评分描述内容。 :::

默认评分描述内容

自定义评分描述内容

<star :value="3" :size="20" />
<star :value="3" :size="20" :show-text="true" :texts="texts"/>

export default  {
  data () {
    return {
      texts: ['恶劣', '不满意', '一般', '满意', '超棒']
    }
  }
}

只读

::: tip 通过传递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事件

::: tip 非disabled状态下分值改变时触发此事件，参数为改变后的分值 :::

示例：

<star :value="4" @change="handleStarChange"></star>

export default {
  methods: {
    // 评分组件值更新事件
    handleStarChange (value) {
      console.log(value)
    }
  }
}