Rate 评分

使用指南

组件介绍

评分组件，支持自定义评分图案，评分范围等。

引入方式

import { Rate } from "feart";

components:{
  'fe-rate':Rate,
}

代码演示

基础用法

使用 icon 组件

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

不使用 icon 组件

<fe-rate v-model="value" :is-icon="false" />

允许半星选择

允许选择半星，每次点击切换半星/一星状态

<fe-rate v-model="value" :allow-half="true" @on-change="changeVal" />

export default {
  methods: {
    changeVal(val) {
      console.log(val);
    },
  },
};

禁止滑动选择

不允许滑动选择，只能点击选择

<fe-rate v-model="value" :allow-half="true" :touchable="false" />

自定义数量和样式

自定义数量

<fe-rate v-model="value" :max="10" />

自定义图标和样式

<fe-rate v-model="value" star="诺" margin="32" :is-icon="false" />

<fe-rate
  v-model="value"
  star="love"
  void-star="loveline"
  font-size="2.5rem"
  color="rgb(251, 6, 6, 0.7)"
/>

只读/禁用状态

只读状态

<fe-rate v-model="value" :is-icon="false" star="诺" readonly />

禁用状态

<fe-rate v-model="value" star="love" void-star="loveline" disabled />

API

Events