Rate 评分

基础用法

<wx-rate v-model="n1"></wx-rate>

<script>
export default {
  data() {
    return {
      n1: 2
    };
  }
};
</script>

自定义尺寸

<wx-rate v-model="n2" :size="35"></wx-rate>

<script>
export default {
  data() {
    return {
      n2: 3
    };
  }
};
</script>

自定义数量

<wx-rate v-model="n3" :count="7"></wx-rate>

<script>
export default {
  data() {
    return {
      n3: 0
    };
  }
};
</script>

自定义颜色

<wx-rate v-model="n4" color="#ee0a24"></wx-rate>

<script>
export default {
  data() {
    return {
      n4: 1
    };
  }
};
</script>

禁用状态

<wx-rate v-model="n5" disabled></wx-rate>

<script>
export default {
  data() {
    return {
      n5: 3
    };
  }
};
</script>

辅助描述

<wx-rate v-model="n6" label="评分" :texts="texts"></wx-rate>

<script>
export default {
  data() {
    return {
      n6: 4,
      texts: ["非常差", "不满意", "一般", "满意", "非常满意"]
    };
  }
};
</script>

change事件

<wx-rate v-model="n7" @change="handleChange"></wx-rate>

<script>
export default {
  data() {
    return {
      n7: 2
    };
  },
  methods: {
    handleChange(v) {
      this.$toast(`当前值：${v}`);
    }
  }
};
</script>

Rate Attributes

参数	说明	类型	可选值	默认值
v-model/value	绑定值	Number	-	-
count	评分图标数， 即最大分值	Number	-	5
size	评分图标尺寸，单位为px	Number	-	28
color	评分图标选中颜色	String	-	-
spacing	评分图标间距	Number	-	12
label	评分标题，空值即不显示	String	-	-
texts	分值辅助说明，空值即不显示	Array	-	-
disabled	禁用状态	Boolean	-	false

Rate Events

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

评分