标签（多值） 控件 可视化代码生成平台 · 输入增强控件
<div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">标签（多值） 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 输入增强控件（4/27）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>录入多个离散值——兴趣标签、关键词、技能、分类标记，可回车或逗号分隔成多个气泡。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">varchar(255)（多个值用英文逗号分隔存放）。</code><br>
<b>列表/搜索：</b>列表显示成小气泡；搜索为包含匹配（按整串）。<br>
<b>适用：</b>一个字段要挂"多个并列关键词/标记"的场景。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">输入框 + 已选标签气泡区；输入回车或逗号即生成一颗气泡；气泡可点 × 删除。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">回车/逗号确认一个标签；退格删最后一个；点击气泡 × 移除。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">气泡颜色、圆角、间距随主题可调；可限制最大标签数。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">存英文逗号分隔字符串；保存时去重/去空；显示时按逗号拆成小气泡。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如"关键词标签"。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">提示文案</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">提示"回车添加多个"。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 显示设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">进列表</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">列表以气泡展示。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">可搜索</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">模糊匹配。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">排序权重</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">位置。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 专属属性</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">分隔符</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">默认英文逗号；前端自动识别逗号/回车。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">最大数量</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">可选，超出拦截。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">兴趣标签（回车添加）</span>
<div>
<span style="display:inline-block;background:#dbeafe;color:#1e40af;border-radius:11px;padding:2px 10px;font-size:13px;margin:2px;">PHP</span>
<span style="display:inline-block;background:#dbeafe;color:#1e40af;border-radius:11px;padding:2px 10px;font-size:13px;margin:2px;">MySQL</span>
<input type="text" placeholder="输入后回车" style="border:1px solid #cbd5e1;border-radius:11px;padding:3px 10px;font-size:13px;width:120px;">
</div>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：标签存的是"逗号分隔串"，不是数组；需要结构化（如带值）请用键值对/多行表格。逗号分隔意味着单个标签内不要含英文逗号。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">标签（多值） 控件文档 · 随工具迭代更新</div>
页:
[1]