Vant3 Rate 評分

介紹

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

實(shí)例演示

引入

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

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

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

代碼演示

基礎(chǔ)用法

通過 v-model 來綁定當(dāng)前評分值。

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

import { ref } from 'vue';

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

自定義圖標(biāo)

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

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

自定義樣式

通過 size 屬性設(shè)置圖標(biāo)大小，color 屬性設(shè)置選中時的顏色，void-color 設(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è)置評分總數(shù)。

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

禁用狀態(tài)

通過 disabled 屬性來禁用評分。

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

只讀狀態(tài)

通過 readonly 屬性將評分設(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 事件

評分變化時，會觸發(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 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。