使用场景
用于评分输入与只读评分展示，模型为数字。allowHalf 支持半星，texts/colors 与阈值配置表达评分语义。
半星、文字与只读
change 携带提交分数。disabled 显示评分，showScore/scoreTemplate 展示数值。
半星、文字与只读
<template>
<div class="example">
<AsamRate
ref="control"
v-bind="{ 'allow-half': true, 'show-text': true }"
v-model="value"
:texts="['很差', '较差', '一般', '满意', '很好']"
@change="event = $event"
/>
<AsamRate
:model-value="value"
v-bind="{ disabled: true, 'show-score': true, 'score-template': '{value} 分' }"
/>
<AsamButton type="default" @click="control?.focus()"> 聚焦评分 </AsamButton>
<output>评分：{{ value }}；事件：{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamRateBasicExample' });
import { ref } from 'vue';
import { AsamRate, AsamButton } from '@asam-ui/ui';
import type { AsamRateExpose } from '@asam-ui/ui';
const control = ref<AsamRateExpose>();
const value = ref(3.5);
const event = ref(0);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<AsamRate
ref="control"
v-bind="{ 'allow-half': true, 'show-text': true }"
v-model="value"
:texts="['很差', '较差', '一般', '满意', '很好']"
@change="event = $event"
/>
<AsamRate
:model-value="value"
v-bind="{ disabled: true, 'show-score': true, 'score-template': '{value} 分' }"
/>
<AsamButton type="default" @click="control?.focus()"> 聚焦评分 </AsamButton>
<output>评分：{{ value }}；事件：{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamRateBasicExample' });
import { ref } from 'vue';
import { AsamRate, AsamButton } from '@asam-ui/ui';
const control = ref();
const value = ref(3.5);
const event = ref(0);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>颜色与图标
图标从 ASAM 图标包导入。clearable 再次点击当前评分可清除，max 控制总分。
颜色与图标
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamRate
v-model="value"
v-bind="{
clearable: true,
max: 5,
icons: [StarFilled, StarFilled, StarFilled],
'void-icon': Star,
colors: ['#d03050', '#e6a23c', '#18a058']
}"
/>
<output>评分：{{ value }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamRateAppearanceExample' });
import { ref } from 'vue';
import { AsamRate } from '@asam-ui/ui';
import { Star, StarFilled } from '@asam-ui/icons-vue';
const value = ref(3);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="example">
<AsamRate
v-model="value"
v-bind="{
clearable: true,
max: 5,
icons: [StarFilled, StarFilled, StarFilled],
'void-icon': Star,
colors: ['#d03050', '#e6a23c', '#18a058']
}"
/>
<output>评分：{{ value }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamRateAppearanceExample' });
import { ref } from 'vue';
import { AsamRate } from '@asam-ui/ui';
import { Star, StarFilled } from '@asam-ui/icons-vue';
const value = ref(3);
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamRate size="large" :model-value="3" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamRate size="big" :model-value="3" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamRate size="default" :model-value="3" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamRate size="small" :model-value="3" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamRate :model-value="3" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamRateSizesExample' });
import { ref } from 'vue';
import { AsamRate, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamRate size="large" :model-value="3" />
</section>
<section data-density="big">
<strong> big </strong>
<AsamRate size="big" :model-value="3" />
</section>
<section data-density="default">
<strong> default </strong>
<AsamRate size="default" :model-value="3" />
</section>
<section data-density="small">
<strong> small </strong>
<AsamRate size="small" :model-value="3" />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamRate :model-value="3" />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamRateSizesExample' });
import { ref } from 'vue';
import { AsamRate, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
ASAM 四档 size 调整评分交互区与图标密度。没有内容插槽；实例公开 focus、setCurrentValue 与 resetCurrentValue。展示文字与颜色通过公开属性配置，不使用私有实例字段。
评分预览与恢复
setCurrentValue 设置当前预览，resetCurrentValue 回到已提交模型；预览不提交 v-model。 完整说明。
公开评分预览、恢复与聚焦
<template>
<div class="example">
<AsamRate
ref="control"
v-model="rating"
show-text
:texts="['很差', '较差', '一般', '满意', '很好']"
:low-threshold="2"
:high-threshold="4"
clearable
aria-label="公开评分预览"
/>
<div class="actions">
<AsamButton type="default" @click="control?.setCurrentValue(4)">预览 4 星</AsamButton>
<AsamButton type="default" @click="control?.resetCurrentValue()">结束预览</AsamButton>
<AsamButton type="default" @click="control?.focus()">聚焦评分</AsamButton>
</div>
<output>已提交评分：{{ rating }}；预览不会修改模型</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamRate, AsamButton } from '@asam-ui/ui';
import type { AsamRateExpose } from '@asam-ui/ui';
const control = ref<AsamRateExpose>();
const rating = ref(3);
defineOptions({ name: 'AsamRateInstanceDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
.actions {
display: flex;
gap: var(--asam-space-sm, 8px);
}
</style><template>
<div class="example">
<AsamRate
ref="control"
v-model="rating"
show-text
:texts="['很差', '较差', '一般', '满意', '很好']"
:low-threshold="2"
:high-threshold="4"
clearable
aria-label="公开评分预览"
/>
<div class="actions">
<AsamButton type="default" @click="control?.setCurrentValue(4)">预览 4 星</AsamButton>
<AsamButton type="default" @click="control?.resetCurrentValue()">结束预览</AsamButton>
<AsamButton type="default" @click="control?.focus()">聚焦评分</AsamButton>
</div>
<output>已提交评分：{{ rating }}；预览不会修改模型</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamRate, AsamButton } from '@asam-ui/ui';
const control = ref();
const rating = ref(3);
defineOptions({ name: 'AsamRateInstanceDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
.actions {
display: flex;
gap: var(--asam-space-sm, 8px);
}
</style>评分主题变量
评分保留原生主题变量，基础颜色与 ASAM 品牌变量协同生效。 完整说明。
评分主题变量
<template>
<div class="example">
<AsamRate
v-model="value"
class="rating-theme"
show-text
:texts="['很差', '较差', '一般', '满意', '很好']"
/>
<AsamRate
:model-value="value"
class="rating-theme"
disabled
show-score
score-template="{value} 分"
/>
<output>评分：{{ value }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamRate } from '@asam-ui/ui';
const value = ref(3);
defineOptions({ name: 'AsamRateStyleDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
.rating-theme {
--el-rate-void-color: var(--asam-color-text-secondary, #64748b);
--el-rate-fill-color: var(--asam-color-primary, #526d82);
--el-rate-disabled-void-color: var(--asam-color-text-disabled, #94a3b8);
--el-rate-text-color: var(--asam-color-text-primary, #18212b);
}
</style><template>
<div class="example">
<AsamRate
v-model="value"
class="rating-theme"
show-text
:texts="['很差', '较差', '一般', '满意', '很好']"
/>
<AsamRate
:model-value="value"
class="rating-theme"
disabled
show-score
score-template="{value} 分"
/>
<output>评分：{{ value }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamRate } from '@asam-ui/ui';
const value = ref(3);
defineOptions({ name: 'AsamRateStyleDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
.rating-theme {
--el-rate-void-color: var(--asam-color-text-secondary, #64748b);
--el-rate-fill-color: var(--asam-color-primary, #526d82);
--el-rate-disabled-void-color: var(--asam-color-text-disabled, #94a3b8);
--el-rate-text-color: var(--asam-color-text-primary, #18212b);
}
</style>API 阅读方式
评分的无障碍名称使用 ariaLabel（模板中写 aria-label）；旧 label 不在固定 2.14.7 源码的公开属性中。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
API
属性 AsamRateProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | 和 Rate 的 aria-label 属性保持一致 | string | undefined | — |
id | 原生 id 属性 | string | undefined | undefined |
disabled | 是否为只读 | (AsamRateProps)["disabled"] | undefined |
max | 最大分值 | number | undefined | 5 |
modelValue | 选中项绑定值 | number | undefined | 0 |
textColor | 辅助文字的颜色 | string | undefined | "" |
showText | 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容 | boolean | undefined | false |
clearable | 是否可以重置值为 0 | boolean | undefined | false |
lowThreshold | 低分和中等分数的界限值，值本身被划分在低分中 | number | undefined | 2 |
highThreshold | 高分和中等分数的界限值，值本身被划分在高分中 | number | undefined | 4 |
colors | icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色 | (AsamRateProps)["colors"] | 工厂函数（每个实例创建） |
voidColor | 未选中 icon 的颜色 | string | undefined | "" |
disabledVoidColor | 只读时未选中 icon 的颜色 | string | undefined | "" |
icons | 图标组件若传入数组，则需要传入 3 个元素，分别为 3 个部分所对应的类名；若传入对象，则可自定义分段，键名为分段的界限值，键值为对应的类名 | (AsamRateProps)["icons"] | 工厂函数（每个实例创建） |
voidIcon | 未被选中的图标组件 | (AsamRateProps)["voidIcon"] | 工厂函数（每个实例创建） |
disabledVoidIcon | 禁用状态的未选择图标 | (AsamRateProps)["disabledVoidIcon"] | 工厂函数（每个实例创建） |
allowHalf | 是否允许半选 | boolean | undefined | false |
showScore | 是否显示当前分数， show-score 和 show-text 不能同时为真 | boolean | undefined | false |
texts | 辅助文字数组 | string[] | undefined | 工厂函数（每个实例创建） |
scoreTemplate | 分数显示模板 | string | undefined | "{value}" |
size | 尺寸 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
事件 AsamRateEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
change | — | [value: number] | — |
update:modelValue | — | [value: number] | — |
插槽 AsamRateSlots
实例方法与状态 AsamRateExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
setCurrentValue | 设置当前值 | (value: number, event?: MouseEvent) => void | — |
resetCurrentValue | — | () => void | — |
focus | — | () => void | — |
用法与契约补充说明
评分预览与恢复
setCurrentValue 设置当前预览，resetCurrentValue 回到已提交模型；预览不提交 v-model。 低分与高分阈值决定 colors / icons 的分档，空图标、禁用空图标及颜色可独立配置。 allowHalf 保留半星选择，clearable 可再次点击同一分值清零；showText 与 showScore 分别 显示文字和 scoreTemplate 中的值，disabled 只读模式仍显示真实评分。 评分容器及图标支持主题变量，focus 是 ASAM 补充的键盘入口。
更多参数与事件说明
评分主题变量
固定原生评分保留 --el-rate-void-color、--el-rate-fill-color、--el-rate-disabled-void-color 和 --el-rate-text-color 四个主题变量。示例从 ASAM tokens 消费设计值；若同时传 colors 或 voidColor 等属性，显式属性会覆盖对应主题变量。只读评分仍保留文字与空星配色。
关联组件
参数与事件补充说明
完整透传 2.14.7 的基础参数，并在适用时使用 ASAM 尺寸密度。
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
max
必填：否；声明来源：上游声明。
默认值与来源
5（已安装运行时；已安装组件）固定上游文档默认：5（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：5（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
textColor
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
showText
必填：否；声明来源：上游声明。
showText 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：否；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
lowThreshold
必填：否；声明来源：上游声明。
默认值与来源
2（已安装运行时；已安装组件）固定上游文档默认：2（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：2（2.14.7；源码事实，未作为 ASAM 运行实测）
highThreshold
必填：否；声明来源：上游声明。
默认值与来源
4（已安装运行时；已安装组件）固定上游文档默认：4（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：4（2.14.7；源码事实，未作为 ASAM 运行实测）
colors
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：['#f7ba2a', '#f7ba2a', '#f7ba2a']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => mutable(['', '', ''] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
voidColor
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：#c6d1de（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
disabledVoidColor
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：#eff2f7（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
icons
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：[StarFilled, StarFilled, StarFilled]（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() =>
[StarFilled, StarFilled, StarFilled] as [Component, Component, Component]（2.14.7；源码事实，未作为 ASAM 运行实测）
voidIcon
必填：否；声明来源：上游声明。
voidIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRateProps)["voidIcon"]>, (...args: never[]) => unknown>>[1]): any
voidIcon.__isFragment:undefined— 依赖声明voidIcon.__isTeleport:undefined— 依赖声明voidIcon.__isSuspense:undefined— 依赖声明
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：Star（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：() => Star as Component（2.14.7；源码事实，未作为 ASAM 运行实测）
disabledVoidIcon
必填：否；声明来源：上游声明。
disabledVoidIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRateProps)["disabledVoidIcon"]>, (...args: never[]) => unknown>>[1]): any
disabledVoidIcon.__isFragment:undefined— 依赖声明disabledVoidIcon.__isTeleport:undefined— 依赖声明disabledVoidIcon.__isSuspense:undefined— 依赖声明
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：StarFilled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：() => StarFilled as Component（2.14.7；源码事实，未作为 ASAM 运行实测）
allowHalf
必填：否；声明来源：上游声明。
allowHalf 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showScore
必填：否；声明来源：上游声明。
showScore 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
texts
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：['Extremely bad', 'Disappointed', 'Fair', 'Satisfied', 'Surprise']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() =>
mutable([
'Extremely bad',
'Disappointed',
'Fair',
'Satisfied',
'Surprise',
] as const)（2.14.7；源码事实，未作为 ASAM 运行实测）
scoreTemplate
必填：否；声明来源：上游声明。
默认值与来源
"{value}"（已安装运行时；已安装组件）固定上游文档默认：{value}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'{value}'（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）AsamRateProps 公开类型视图
import type { Component, Attrs } from 'vue';
import type { AsamRateProps, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamRateProps
type PublicContract = {
readonly "ariaLabel"?: string | undefined;
readonly "id"?: string | undefined;
readonly "disabled"?: (AsamRateProps)["disabled"];
readonly "max"?: number | undefined;
readonly "modelValue"?: number | undefined;
readonly "textColor"?: string | undefined;
readonly "showText"?: boolean | undefined;
readonly "clearable"?: boolean | undefined;
readonly "lowThreshold"?: number | undefined;
readonly "highThreshold"?: number | undefined;
readonly "colors"?: (AsamRateProps)["colors"];
readonly "voidColor"?: string | undefined;
readonly "disabledVoidColor"?: string | undefined;
readonly "icons"?: (AsamRateProps)["icons"];
readonly "voidIcon"?: (AsamRateProps)["voidIcon"];
readonly "disabledVoidIcon"?: (AsamRateProps)["disabledVoidIcon"];
readonly "allowHalf"?: boolean | undefined;
readonly "showScore"?: boolean | undefined;
readonly "texts"?: string[] | undefined;
readonly "scoreTemplate"?: string | undefined;
"size"?: AsamControlSize | undefined;
};参数与事件说明
change
必填：是；声明来源：上游声明。
update:modelValue
必填：是；声明来源：上游声明。
AsamRateEmits 公开类型视图
import type { AsamRateEmits } from '@asam-ui/ui';
// AsamRateEmits
type PublicContract = {
"change": [value: number];
"update:modelValue": [value: number];
};AsamRateSlots 公开类型视图
import type { AsamRateSlots } from '@asam-ui/ui';
// AsamRateSlots
type PublicContract = {
[key: string]: never;
};参数与事件说明
setCurrentValue
必填：是；声明来源：上游声明。
setCurrentValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: number, event?: MouseEvent | undefined): void
resetCurrentValue
必填：是；声明来源：上游声明。
resetCurrentValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamRateExpose 公开类型视图
import type { AsamRateExpose } from '@asam-ui/ui';
// AsamRateExpose
type PublicContract = {
"setCurrentValue": (value: number, event?: MouseEvent) => void;
"resetCurrentValue": () => void;
"focus": () => void;
};