Vant4 Rate 評(píng)分

介紹

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

引入

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

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

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

代碼演示

基礎(chǔ)用法

通過 ?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)

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

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

自定義樣式

通過 ?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ù)量

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

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

禁用狀態(tài)

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

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

只讀狀態(tài)

通過 ?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)聽 change 事件

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

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

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

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

API

Props

Events

類型定義

組件導(dǎo)出以下類型定義：

import type { RateProps } from 'vant';

主題定制

樣式變量

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