101 lines
3.6 KiB
JSON
101 lines
3.6 KiB
JSON
{
|
||
"slug": "rate",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 评分组件，点击即派发 input 事件回传数值，支持半星与只读模式。",
|
||
"usage": [
|
||
"Vue 2 端 v-model=\"score\" 直接绑定数值，组件通过 input 与 change 事件同步更新。",
|
||
"allowHalf 为 true 时按点击位置判断前后半星，判定依据是 currentTarget 的 getBoundingClientRect 中点。",
|
||
"重复点击当前分值会归零：choose 里判断 next === value 时把结果置为 0。",
|
||
"readonly 与 disabled 都在 choose 开头拦截，只读与禁用都不会产生新评分。"
|
||
],
|
||
"bestPractices": [
|
||
"size 只在不为 default 时才追加类名，传 small 或 large 会得到对应尺寸类，传其它值不会报错但也不生效。",
|
||
"showText 打开后展示 texts 里对应文案，未评分时固定显示「未评分」。",
|
||
"texts 数组长度要与 count 匹配，取值用 Math.ceil(value) - 1 作为下标。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端为 8 个 prop 加 input/change 双事件，星级用两层字符叠加实现填充比例。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "Number，默认 0",
|
||
"desc": "当前评分，v-model 的接收端"
|
||
},
|
||
{
|
||
"name": "count",
|
||
"type": "Number，默认 5",
|
||
"desc": "星星数量"
|
||
},
|
||
{
|
||
"name": "allowHalf",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "是否允许半星，按点击位置判定"
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "只读，点击不产生新值"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "禁用，样式对应 is-disabled"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "String，默认 'default'",
|
||
"desc": "非默认时作为尺寸类名追加到根节点"
|
||
},
|
||
{
|
||
"name": "showText",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "是否在右侧显示评分文案"
|
||
},
|
||
{
|
||
"name": "texts",
|
||
"type": "Array，默认五档文案",
|
||
"desc": "评分文案表，取值用 ceil(value) 减一"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，参数为新评分",
|
||
"desc": "点击可用星星时派发，v-model 依赖它"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "事件，参数为新评分",
|
||
"desc": "与 input 同时派发，负载相同"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"每颗星是 span，没有 role=\"radio\" 也没有 tabindex，键盘无法评分。",
|
||
"只读与禁用的区别只在类名上，缺少 aria-readonly / aria-disabled。",
|
||
"评分结果以文字形式输出（showText 时），对读屏器而言这是唯一可读的评分信息。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Rate.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Rate.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Rate.css",
|
||
"kind": "样式文件",
|
||
"desc": "Rate.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"rate-ex-1",
|
||
"rate-ex-2",
|
||
"rate-ex-3"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Rate.vue2.vue:17-26，texts 的默认值在第 25 行。",
|
||
"半星判定与归零逻辑见 frameworks/Rate.vue2.vue:36-47，归零在第 44 行。",
|
||
"input 与 change 在 frameworks/Rate.vue2.vue:45-46 派发，showText 文案见第 31-33 行。"
|
||
]
|
||
}
|