iter(g209): 演示页补齐新参数现场演示

This commit is contained in:
HIsheR
2026-10-26 19:22:56 +08:00
parent b30dfe3501
commit e0cf55e875
+9 -3
View File
@@ -210,6 +210,7 @@ const priceHi = signal(800); // 区间滑块上限
// —— 数字输入:购买数量演示,与禁用态实例共用同一信号 ——
const qty = signal(1);
const price = signal('9.9'); // 演示 suffix 附加块
const pwd = signal(''); // 演示 password 显隐切换
const amount = signal(2); // 演示 inputNumber 前后缀
// —— 步骤条:下单流程演示,按钮推进、点已完成步骤回跳 ——
@@ -217,6 +218,7 @@ const stepIdx = signal(0);
// —— 评分:满意度演示,与只读实例共用同一信号 ——
const score = signal(0);
const score2 = signal(3); // 演示 allowClear 可清除评分
// —— 空状态:搜索无结果演示 ——
const noResult = signal(true);
@@ -315,10 +317,11 @@ const content = h(
section(
'sec-bind',
'双向绑定',
'textField 与信号双向同步:输入即回显;prefix/suffix 渲染为输入框内侧附加块;clearable 开启后有值即显一键清空。',
'textField 与信号双向同步:输入即回显;prefix/suffix 渲染为输入框内侧附加块;clearable 开启后有值即显一键清空;password 原生打点并内置显隐切换。',
textField({ placeholder: '输入名字…', value: name }),
textField({ placeholder: '搜索…', value: name, prefix: searchIcon(), clearable: true }),
textField({ value: price, suffix: '元', clearable: true }),
textField({ placeholder: '密码…', value: pwd, password: true, clearable: true }),
h('span', { class: 'out' }, () => (name() ? `你好,${name()}!` : '等待输入…')),
),
section(
@@ -343,6 +346,7 @@ const content = h(
}), h('span', { class: 'out' }, () => (stackPick() ? `技术栈:${stackPick()}` : '分组下拉:试试搜索「d」'))),
h('div', { class: 'row' }, radioGroup({ options: [{ value: 's', label: '小' }, { value: 'm', label: '中' }, { value: 'l', label: '大' }], value: size })),
textarea({ placeholder: '一句话介绍…', value: bio, rows: 2, maxCount: 30 }),
textarea({ placeholder: '自适应高度(1-4 行钳制)…', value: signal(''), autosize: { minRows: 1, maxRows: 4 } }),
h('span', { class: 'out' }, () => `简介 ${bio().length} 字`),
h(
'div',
@@ -632,13 +636,14 @@ const content = h(
section(
'sec-rate',
'评分',
'rate:点选星标打分,悬停预览移出还原,键盘 →/↑ 加分 ←/↓ 减分,disabled 只读展示。',
'rate:点选星标打分,悬停预览移出还原,键盘 →/↑ 加分 ←/↓ 减分,disabled 只读展示,allowClear 再点当前分清零。',
h(
'div',
{ class: 'row' },
rate({ value: score, onChange: (v) => toast.info(`评分 ${v} 星`) }),
h('span', { class: 'out' }, () => `当前:${score() || '未评分'}`),
),
h('div', { class: 'row' }, rate({ value: score2, allowClear: true }), h('span', { class: 'out' }, () => `可清除(再点当前分归零):${score2() || '已清'}`)),
h('div', { class: 'row' }, rate({ value: score, disabled: true })),
),
section(
@@ -946,13 +951,14 @@ const content = h(
section(
'sec-multiselect',
'多选下拉',
'multiSelect:标签式回显 + 可搜索弹层,点选不收起弹层(连续多选),空输入退格删末个标签,max 到限后未选项禁用,maxTagCount 折叠溢出标签。',
'multiSelect:标签式回显 + 可搜索弹层,点选不收起弹层(连续多选),空输入退格删末个标签,max 到限后未选项禁用,maxTagCount 折叠溢出标签,clearable 一键清空。',
h(
'div',
{ class: 'row' },
multiSelect({
value: tagPick,
max: 3,
clearable: true,
placeholder: '选择技术栈(最多 3 项)',
onChange: (v) => toast.info(`已选 ${v.length} 项`),
options: [