Rate 评分

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

用来选中星级

import { DuRate } from 'dangoui'

示例

基本用法

<template>
  <PreviewBlock title="不同大小" >
    <div>
      <DuRate
        size="large"
        :count="7"
        :value="5.3"
      />
      <DuRate
        size="medium"
      />
      <DuRate
        size="small"
      />
      <DuRate
        size="mini"
      />
    </div>
  </PreviewBlock>
  <PreviewBlock title="改变值" >
    <DuRate
      size="medium"
      :value="value"
      @update:value="handleUpdate"
    />
  </PreviewBlock>
  <PreviewBlock title="动画效果 - bounce">
    <DuRate
      size="large"
      animation="bounce"
      :defaultValue="3"
    />
  </PreviewBlock>
  <PreviewBlock title="从 dangoui-icon-config 导入图标，推荐用这个" >
    <DuRate
      size="large"
      :defaultValue="3.7"
      :icon="iconLikeNormal"
    />
  </PreviewBlock>
  <PreviewBlock title="自定义图标" >
    <DuRate
      size="large"
      :defaultValue="3.7"
      icon="like-normal"
    />
  </PreviewBlock>
    <PreviewBlock title="支持半选" >
    <DuRate
      size="large"
      v-model:value="percentValue"
      icon="like-normal"
      half
    />
  </PreviewBlock>
  <PreviewBlock title="带文字" >
    <DuRate
      size="large"
      icon="like-normal"
      half
      withText
      :text-list="[ '丑', '难看', '还行', '不错', '绝美']"
      :defaultValue="3"
    />
  </PreviewBlock>
   <PreviewBlock title="非受控" >
    <DuRate
      size="large"
      icon="like-normal"
      half
      defaultValue="3"
    />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { DuRate, DuIcon } from 'dangoui'
import { iconLikeNormal } from 'dangoui-icon-config'

const value = ref(1.5)
const percentValue = ref(1.5)

watch(percentValue, (v) => {
  console.log(v)
})

function handleUpdate(v: number) {
  value.value = v
}

</script>

不同颜色

<template>
  <PreviewBlock title="primary">
    <DuRate :value="4" color="primary" />
  </PreviewBlock>
  <PreviewBlock title="secondary">
    <DuRate :value="4" color="secondary" />
  </PreviewBlock>
  <PreviewBlock title="success">
    <DuRate :value="4" color="success" />
  </PreviewBlock>
  <PreviewBlock title="warning">
    <DuRate :value="4" color="warning" />
  </PreviewBlock>
  <PreviewBlock title="error">
    <DuRate :value="4" color="error" />
  </PreviewBlock>
  <PreviewBlock title="trade">
    <DuRate :value="4" color="trade" />
  </PreviewBlock>
  <PreviewBlock title="使用 hex 色值">
    <DuRate :value="4" color="#666" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuRate } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
color	`string`	`"#FC7E22"`	主题颜色
value	`number`	-	当前值
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
size	`"normal" \| "mini" \| "small" \| "medium" \| "large"`	`"medium"`	Rate 组件尺寸
icon	`string \| { _: string; }`	`iconRateFilled`	图标，对应 icon 组件的 name
disabled	`boolean`	`false`	是否禁用评分
animation	`"bounce" \| "fade" \| null`	`null`	评分改变时触发的过渡动画
count	`number`	`5`	总数
default-value	`number`	`0`	默认值
clickable	`boolean`	`true`	是否禁用评分
half	`boolean`	`false`	是否支持半选
with-text	`boolean`	`false`	是否在icon下显示文字，该项只在size为large的情况下可用
text-list	`string[]`	-	文字列表

事件

名称	类型
update:value	`(event: "update:value", i: number): void`
change	`(event: "change", value: { value: number \| undefined; }): void`