cv-rate 评分

简要

多用于商品评价打分、服务态度评价、用户满意度等场景，组件名：cv-rate

示例

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-rate</view>
      <view class="components-title-d">评分</view>
    </view>
    <cv-form-base ref="refFormBase" labelWidth="100" style="padding: 0 10px">
      <cv-form-item label="默认">
        <cv-rate v-model="formData.rate1" />
      </cv-form-item>
      <cv-form-item label="label">
        <cv-rate />
      </cv-form-item>
      <cv-form-item label="自定义长度">
        <cv-rate max="10" />
      </cv-form-item>
      <cv-form-item label="自定义大小">
        <cv-rate size="30" />
      </cv-form-item>
      <cv-form-item label="自定义颜色">
        <cv-rate activeColor="#ff0000" />
      </cv-form-item>
      <cv-form-item label="自定义间距">
        <cv-rate margin="5" />
      </cv-form-item>
      <cv-form-item label="禁止点击">
        <cv-rate disabled />
      </cv-form-item>
      <cv-form-item label="未选中的星星为镂空状态">
        <cv-rate isFill />
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        rate1: 3
      },
      info1: ''
    };
  },
  watch: {
    formData() {
      console.log('---');
    }
  },
  onLoad() {},
  methods: {}
};
</script>

属性

属性名	类型	默认值	说明
v-model	Number	1	当前评分
isFill	Boolean	false	星星的类型，是否镂空
color	String	#ececec	星星的颜色
activeColor	String	#ffca3e	星星选中状态颜色
size	Number	24	星星的大小
max	Number	5	最大评分
margin	Number	0	星星的间距
disabled	Boolean	false	是否可点击