评分 Rate

提供评分能力。

使用

API

安装使用

import { TiRate } from '@titian-design/mobile-vue';

用法示例

基本使用

codesanbox

copy

code

<template>
  <TiRate :value="3" />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

只读

codesanbox

copy

code

<template>
  <TiRate :value="3" readOnly />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

设置星级

codesanbox

copy

code

<template>
  <TiRate :value="3" :count="7" clearable />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

评星尺寸

codesanbox

copy

code

<template>
  <TiRate :value="3" iconSize="60" />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

半星

codesanbox

copy

code

<template>
  <TiRate :value="3.5" allowHalf />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

可清空

codesanbox

copy

code

<template>
  <TiRate :value="3" clearable />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

设置间距

codesanbox

copy

code

<template>
  <TiRate :value="3" extStyle="--rate-gap: 20px;" />
</template>

<script lang="ts" setup>
import { TiRate } from 'titian-h5-vue';
</script>

绑定事件

codesanbox

copy

code

<template>
  <TiRate :value="value" @change="onChangeHandler" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiRate } from 'titian-h5-vue';

const value = ref(3);
const onChangeHandler = (event: CustomEvent<{ value: number }>) => {
  value.value = event.detail.value;
};
</script>

TiRate API

属性 Properties

属性	类型	默认值	说明
value	number	0	值
allow-half	boolean	false	允许半星
clearable	boolean	false	可清空
count	number	5	评分数量
icon	string	rate-star-highlight	评分 icon 图标
icon-size	string | number	theme.fontSize.t10	评分 icon 图标尺寸
empty-icon	string	rate-star-highlight	评分 icon 未选中图标
read-only	boolean	false	是否只读

事件 Events

名称	参数列表	描述	备注
change	(e: CustomEvent<{value: number}>) => void	评分变化时触发该事件	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--rate-gap	theme.spacing.gap.g6	评星间距	-
--rate-color	theme.color.brand.1000	评分选中颜色	-
--rate-empty-color	theme.color.gray.background.100	评星未选中颜色	-