评分 Rate

评分

何时使用

• 对评价进行展示
• 对事物进行快速的评级操作

基本使用

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
function onChange(value: number) {
  console.log('change', value)
}
function onHoverChange(value: number) {
  console.log('hover change', value)
}
</script>
<template>
  <Rate v-model:value="value" @change="onChange" @hoverChange="onHoverChange" />
</template>

文案提示

一般

normal

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
const tooltipsChinese = ['极差', '失望', '一般', '满意', '惊喜']
const tooltipsEnglish = ['terrible', 'bad', 'normal', 'good', 'wonderful']
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Space align="center">
      <Rate v-model:value="value" :tooltips="tooltipsChinese" />
      <Tag color="blue" :bordered="false">
        {{ tooltipsChinese[value - 1] }}
      </Tag>
    </Space>
    <Space align="center">
      <Rate
        v-model:value="value"
        :tooltips="tooltipsEnglish"
        :tooltip-props="{
          bgColor: '#fff',
          tooltipStyle: {
            fontWeight: 500,
            color: 'rgba(0, 0, 0, 0.88)'
          }
        }"
      />
      <Tag color="red" :bordered="false">
        {{ tooltipsEnglish[value - 1] }}
      </Tag>
    </Space>
  </Space>
</template>

禁用

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Rate v-model:value="value" disabled />
</template>

预置图标

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Rate v-model:value="value" character="star-outlined" :size="24" />
    <Rate v-model:value="value" character="heart-filled" :size="24" />
    <Rate v-model:value="value" character="heart-outlined" :size="24" />
  </Space>
</template>

半星

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Rate v-model:value="value" :size="30" allow-half />
</template>

自定义字符

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { ThunderboltFilled } from '@ant-design/icons-vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Rate v-model:value="value" character="好" :size="32" allow-half />
    <Rate v-model:value="value" character="A" :size="48" allow-half />
    <Rate v-model:value="value" :size="32" allow-half>
      <template #character>
        <ThunderboltFilled />
      </template>
    </Rate>
  </Space>
</template>

自定义颜色

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { LikeFilled, FireFilled } from '@ant-design/icons-vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Space vertical>
    <Rate v-model:value="value" color="#1677FF" :size="32" allow-half />
    <Rate v-model:value="value" color="#ff6900" :size="32" allow-half>
      <template #character>
        <LikeFilled />
      </template>
    </Rate>
    <Rate v-model:value="value" color="#d4380d" :size="32" allow-half>
      <template #character>
        <FireFilled />
      </template>
    </Rate>
  </Space>
</template>

自定义间距

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Rate v-model:value="value" :size="32" :gap="16" />
</template>

自定义 star 总数

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <Rate v-model:value="value" :size="32" :count="10" />
</template>

评分配置器

3

Show Code

<script setup lang="ts">
import { ref, watchEffect, reactive } from 'vue'
const characterOptions = [
  {
    label: 'star-outlined',
    value: 'star-outlined'
  },
  {
    label: 'star-filled',
    value: 'star-filled'
  },
  {
    label: 'heart-outlined',
    value: 'heart-outlined'
  },
  {
    label: 'heart-filled',
    value: 'heart-filled'
  },
  {
    label: 'custom-character',
    value: 'custom-character'
  }
]
const value = ref(3)
const state = reactive({
  allowClear: true,
  allowHalf: true,
  count: 5,
  character: 'star-filled',
  customCharacter: 'S',
  size: 36,
  color: '#fadb14',
  gap: 8,
  disabled: false
})
</script>
<template>
  <Row :gutter="[24, 12]">
    <Col :span="6">
      <Space vertical> allowClear:<Switch v-model="state.allowClear" /> </Space>
    </Col>
    <Col :span="6">
      <Space vertical> allowHalf:<Switch v-model="state.allowHalf" /> </Space>
    </Col>
    <Col :span="6">
      <Flex gap="small" vertical> count:<Slider v-model:value="state.count" :min="3" :max="10" /> </Flex>
    </Col>
    <Col :span="6">
      <Flex gap="small" vertical> size:<Slider v-model:value="state.size" :min="10" :max="100" /> </Flex>
    </Col>
    <Col :span="6">
      <Flex gap="small" vertical> color:<ColorPicker v-model:value="state.color" /> </Flex>
    </Col>
    <Col :span="6">
      <Flex gap="small" vertical> gap:<Slider v-model:value="state.gap" :min="0" :max="100" /> </Flex>
    </Col>
    <Col :span="6">
      <Space vertical> disabled:<Switch v-model="state.disabled" /> </Space>
    </Col>
    <Col :span="6">
      <Flex gap="small" vertical> effect：<Select :options="characterOptions" v-model="state.character" /> </Flex>
    </Col>
    <Col :span="6" v-if="state.character === 'custom-character'">
      <Flex gap="small" vertical>
        character:<Input v-model:value="state.customCharacter" placeholder="customCharacter" />
      </Flex>
    </Col>
  </Row>
  <Badge :value="value" style="margin-top: 30px">
    <Rate
      v-bind="state"
      :character="state.character === 'custom-character' ? state.customCharacter : state.character"
      v-model:value="value"
    />
  </Badge>
</template>

APIs

Rate

参数	说明	类型	默认值
allowClear	是否允许再次点击后清除	boolean	true
allowHalf	是否允许半选	boolean	false
count	star 总数	number	5
character	字符或图标，预置四种图标	'star-outlined' | 'star-filled' | 'heart-outlined' | 'heart-filled' | string | slot	'star-filled'
size	字符大小，单位 px	number	20
color	字符选中颜色	string	'#fadb14'
gap	字符间距，单位 px	number	8
disabled	只读，无法进行交互	boolean	false
tooltips	自定义每项的提示信息	string[]	[]
tooltipProps	Tooltip 组件属性配置，参考 Tooltip Props	object	{}
value v-model	当前数，受控值 0,1,2,3...	number	0

Slots

名称	说明	类型
character	自定义字符或图标	v-slot:character="{ value }"
tooltip	自定义每项的提示信息	v-slot:tooltip="{ tooltip, value }"

Events

名称	说明	类型
change	选择时的回调	(value: number) => void
hoverChange	鼠标经过时数值变化的回调	(value: number) => void