Vant3 Rate 評(píng)分

介紹

用于對(duì)事物進(jìn)行評(píng)級(jí)操作。

實(shí)例演示

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Rate } from 'vant';

const app = createApp();
app.use(Rate);

代碼演示

基礎(chǔ)用法

通過(guò) v-model 來(lái)綁定當(dāng)前評(píng)分值。

<van-rate v-model="value" />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3);
    return { value };
  },
};

自定義圖標(biāo)

通過(guò) icon 屬性設(shè)置選中時(shí)的圖標(biāo)，void-icon 屬性設(shè)置未選中時(shí)的圖標(biāo)。

<van-rate v-model="value" icon="like" void-icon="like-o" />

自定義樣式

通過(guò) size 屬性設(shè)置圖標(biāo)大小，color 屬性設(shè)置選中時(shí)的顏色，void-color 設(shè)置未選中時(shí)的顏色。

<van-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>

半星

設(shè)置 allow-half 屬性后可以選中半星。

<van-rate v-model="value" allow-half />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(2.5);
    return { value };
  },
};

自定義數(shù)量

通過(guò) count 屬性設(shè)置評(píng)分總數(shù)。

<van-rate v-model="value" :count="6" />

禁用狀態(tài)

通過(guò) disabled 屬性來(lái)禁用評(píng)分。

<van-rate v-model="value" disabled />

只讀狀態(tài)

通過(guò) readonly 屬性將評(píng)分設(shè)置為只讀狀態(tài)。

<van-rate v-model="value" readonly />

只讀狀態(tài)顯示小數(shù)

設(shè)置 readonly 和 allow-half 屬性后，Rate 組件可以展示任意小數(shù)結(jié)果。

<van-rate v-model="value" readonly allow-half />

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3.3);
    return { value };
  },
};

監(jiān)聽(tīng) change 事件

評(píng)分變化時(shí)，會(huì)觸發(fā) change 事件。

<van-rate v-model="value" @change="onChange" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const value = ref(3);
    const onChange = (value) => Toast('當(dāng)前值：' + value);
    return {
      value,
      onChange,
    };
  },
};

API

Props

Events

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。