Rate评分

用于评分

基础用法

num设置评分，max表示最大分值，默认为5。

<template lang="">
  <div>
    <el-rate
    :num="rateValue"
    ></el-rate>
    <el-rate
    :num="rateValue"
    :max=10
    ></el-rate>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(3)
import ElRate from '@/components/Rate/Rate.vue'
</script>

Size

通过size属性改变评分组件的大小。

<template lang="">
  <div>
    <el-rate
    :num="rateValue"
    size="small"
    ></el-rate>
    <el-rate
    :num="rateValue"
    size="default"
    ></el-rate>
    <el-rate
    :num="rateValue"
    size="large"
    ></el-rate>
  </div>
</template>
<script lang="ts" setup >
import { ref } from 'vue'
const rateValue = ref(3)
import ElRate from '@/components/Rate/Rate.vue'
</script>

颜色

通过color和activeColor属性设置选中和未选中星标的颜色

<template lang="">
  <div>
    <el-rate
    :num="rateValue"
    color="red"
    voidColor="blue"
    ></el-rate>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const rateValue = ref(3)
import ElRate from '@/components/Rate/Rate.vue'
</script>