Vant4 Rate 評分

介紹

用于對事物進行評級操作。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎用法

通過 ?v-model? 來綁定當前評分值。

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

import { ref } from 'vue';

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

自定義圖標

通過 ?icon? 屬性設置選中時的圖標，?void-icon? 屬性設置未選中時的圖標。

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

自定義樣式

通過 ?size? 屬性設置圖標大小，?color? 屬性設置選中時的顏色，?void-color? 設置未選中時的顏色。

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

半星

設置 ?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ù)。

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

禁用狀態(tài)

通過 ?disabled? 屬性來禁用評分。

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

只讀狀態(tài)

通過 ?readonly? 屬性將評分設置為只讀狀態(tài)。

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

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

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

<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 事件

評分變化時，會觸發(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('當前值：' + value);
    return {
      value,
      onChange,
    };
  },
};

API

Props

Events

類型定義

組件導出以下類型定義：

import type { RateProps } from 'vant';

主題定制

樣式變量

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