组件：标签输入框

标签输入框组件用于输入和管理标签（Tags），用户通过输入文本后按回车键将文本转换为标签，并以可视化标签块的形式展示。支持添加、删除、批量设置标签，可限制最大标签数量，并提供了标签变更回调。适用于博客标签、关键词管理、分类选择、筛选条件等需要标签化输入的场景。

典型使用场景：

博客/文章标签管理（输入关键词作为文章标签）
商品分类/属性标签（如颜色、尺寸等）
筛选条件输入（多个过滤关键词）
项目管理中的任务标签（如优先级、类型）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置占位提示文本	`占位提示`	`标签输入框1.占位提示 = "输入标签，回车添加"`
设置最大标签数量	`最大数量`	`标签输入框1.最大数量 = 5`
禁用/启用组件	`禁用`	`标签输入框1.禁用 = 真`
添加单个标签	`添加标签(文本)`	`标签输入框1.添加标签("Vue")`
移除指定索引的标签	`移除标签(索引)`	`标签输入框1.移除标签(0)`
批量设置标签	`置标签数组(文本数组)`	`标签输入框1.置标签数组(["Vue", "React"])`
获取所有标签	`取标签数组()`	`变量标签列表 = 标签输入框1.取标签数组()`
获取标签数量	`取数量()`	`变量数量 = 标签输入框1.取数量()`
清空所有标签	`清空()`	`标签输入框1.清空()`
设置标签变更回调	`置输入被改变回调(回调函数)`	`标签输入框1.置输入被改变回调((源对象, 标签数组) => { ... })`

样式美化参考

标签输入框的外观可通过继承的视图属性以及 CSS 类进行美化：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "6px"）等属性美化。
标签块：每个标签默认以圆角背景块显示，带有删除按钮（×）。可通过 CSS 类自定义标签背景色、文字颜色、内边距、圆角等。
输入区域：输入框的字体大小、颜色等可通过继承属性控制。
禁用状态：禁用 = 真 时，输入框不可交互，样式变灰。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-tag-input {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 4px 8px;
    min-height: 40px;
    background-color: #ffffff;
}
.my-tag-input .tag-item {
    display: inline-block;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 4px;
    padding: 2px 8px;
    margin: 2px 4px;
    font-size: 13px;
}
.my-tag-input .tag-item .tag-remove {
    margin-left: 4px;
    cursor: pointer;
    color: #ff4d4f;
}
.my-tag-input .tag-item .tag-remove:hover {
    color: #ff0000;
}

在代码中应用样式类：标签输入框1.添加样式类("my-tag-input")

基础示例

创建一个标签输入框，添加两个初始标签，限制最多 5 个，并在标签变化时输出当前列表。

变量 标签输入框1 = 创建 标签输入框()
标签输入框1.左边 = 50
标签输入框1.顶边 = 50
标签输入框1.宽度 = 400
标签输入框1.高度 = 44
标签输入框1.边框 = "1px solid #d9d9d9"
标签输入框1.边框圆角 = "6px"
标签输入框1.内边距 = "8px"
标签输入框1.字体大小 = "14px"
标签输入框1.占位提示 = "输入后按回车添加"
标签输入框1.最大数量 = 5

' 添加初始标签
标签输入框1.添加标签("Vue")
标签输入框1.添加标签("React")

' 设置变更回调
标签输入框1.置输入被改变回调((源对象, 标签数组) => {
    调试输出("当前标签：" + 数组到文本(标签数组, ", "))
})

添加组件(标签输入框1)

综合示例：文章标签编辑器

本示例展示一个完整的文章标签编辑面板，支持添加、删除、批量导入标签，并显示当前标签总数。

' ========== 创建面板容器 ==========
变量 面板 = 创建 绝对布局()
面板.左边 = 30
面板.顶边 = 30
面板.宽度 = 500
面板.背景颜色 = "#ffffff"
面板.边框 = "1px solid #e8e8e8"
面板.边框圆角 = "12px"
面板.内边距 = "20px"
添加组件(面板)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "🏷️ 文章标签"
标题.字体大小 = "18px"
标题.字体粗细 = "bold"
标题.内边距 = "0 0 12px 0"
面板.添加组件(标题)

' 标签输入框
变量 标签输入 = 创建 标签输入框()
标签输入.宽度 = 460
标签输入.高度 = 44
标签输入.边框 = "1px solid #d9d9d9"
标签输入.边框圆角 = "6px"
标签输入.内边距 = "8px"
标签输入.字体大小 = "14px"
标签输入.占位提示 = "输入标签，按回车添加"
标签输入.最大数量 = 10
面板.添加组件(标签输入)

' 统计信息
变量 统计标签 = 创建 标签()
统计标签.文本 = "当前标签数：0"
统计标签.字体大小 = "13px"
统计标签.文本颜色 = "#999"
统计标签.内边距 = "8px 0 0"
面板.添加组件(统计标签)

' 快捷标签按钮组
变量 快捷组 = 创建 弹性布局()
快捷组.方向 = "row"
快捷组.间距 = 8
快捷组.内边距 = "12px 0 0"
面板.添加组件(快捷组)

变量 快捷标签 = ["JavaScript", "TypeScript", "CSS", "HTML", "Vue"]
变量循环(i = 0, 取数组成员数(快捷标签), 1)
    变量 快捷按钮 = 创建 按钮()
    快捷按钮.文本 = 快捷标签[i]
    快捷按钮.宽度 = 80
    快捷按钮.高度 = 28
    快捷按钮.背景颜色 = "#f0f0f0"
    快捷按钮.文本颜色 = "#333"
    快捷按钮.边框 = "none"
    快捷按钮.边框圆角 = "4px"
    快捷按钮.字体大小 = "12px"
    快捷组.添加组件(快捷按钮)
    
    ' 绑定点击事件
    快捷按钮.置被单击回调((源对象) => {
        变量 标签文本 = 源对象.文本
        变量 当前列表 = 标签输入.取标签数组()
        ' 检查是否已存在
        变量 已存在 = 假
        变量循环(j = 0, 取数组成员数(当前列表), 1)
            如果(当前列表[j] == 标签文本)
                已存在 = 真
                退出
            结束 如果
        结束循环
        如果(!已存在)
            变量 结果 = 标签输入.添加标签(标签文本)
            如果(结果 == -1)
                弹出提示("标签已存在或已超出最大数量")
            结束 如果
        否则
            弹出提示("标签已存在")
        结束 如果
    })
结束循环

' 清空按钮
变量 清空按钮 = 创建 按钮()
清空按钮.文本 = "清空标签"
清空按钮.宽度 = 100
清空按钮.高度 = 32
清空按钮.背景颜色 = "#ff4d4f"
清空按钮.文本颜色 = "#ffffff"
清空按钮.边框圆角 = "6px"
清空按钮.内边距 = "12px 0 0"
面板.添加组件(清空按钮)

' ========== 事件绑定 ==========
标签输入.置输入被改变回调((源对象, 标签数组) => {
    变量 数量 = 取数组成员数(标签数组)
    统计标签.文本 = "当前标签数：" + 数量
})

清空按钮.置被单击回调((源对象) => {
    标签输入.清空()
    弹出提示("已清空所有标签")
})

属性详解

占位提示

类型： 文本型
说明： 设置或获取输入框为空时显示的占位提示文本，如 "输入后按回车添加"。当输入框获得焦点或已有标签时，占位文本隐藏。

最大数量

类型： 数值型
说明： 设置或获取允许添加的最大标签数量。当达到此数量时，再尝试添加新标签会失败（添加标签 返回 -1）。设为 0 表示不限制数量。默认 0（不限）。

禁用

类型： 逻辑型
说明： 设置或获取是否禁用组件。禁用后，输入框不可编辑，也无法添加或移除标签。默认为 假。

函数详解

添加标签(文本)

功能： 向标签列表末尾添加一个新标签。
参数： 文本（文本型），标签显示的文字。
返回值： 数值型，成功添加时返回新标签的索引位置（从0开始）；若标签已存在（重复）或超出 最大数量，返回 -1。
示例： 变量索引 = 标签输入框1.添加标签("Vue")

移除标签(索引)

功能： 移除指定索引位置的标签。
参数： 索引（数值型），从0开始。
返回值： 无。
示例： 标签输入框1.移除标签(0) 删除第一个标签

置标签数组(文本数组)

功能： 批量设置标签，会替换当前所有标签。
参数： 文本数组，由文本型组成的数组，如 ["Vue", "React"]。
返回值： 无。
示例： 标签输入框1.置标签数组(["Vue", "React", "Angular"])

取标签数组()

功能： 获取当前所有标签的文本数组。
返回值： 文本型数组。
示例： 变量列表 = 标签输入框1.取标签数组()

取数量()

功能： 获取当前标签的总数。
返回值： 数值型。
示例： 变量数量 = 标签输入框1.取数量()

清空()

功能： 移除所有标签，将列表清空。
返回值： 无。
示例： 标签输入框1.清空()

置输入被改变回调(回调函数)

功能： 设置当标签列表发生变化时的回调函数。变化来源包括添加、移除、批量设置或清空标签。
参数： 回调函数，格式为 (源对象, 标签数组) => { ... }。
- 源对象：标签输入框组件本身。
- 标签数组：当前所有标签文本组成的数组。
返回值： 无。

示例：

标签输入框1.置输入被改变回调((源对象, 标签数组) => {
    调试输出("标签变化：" + 数组到文本(标签数组, ", "))
})

事件说明

输入被改变(源对象, 标签数组)

功能： 与 置输入被改变回调 等效，适用于设计文件（.spldg）中定义的组件。