编辑导语：我们在使用各种软件或者网页时，面对我们要去查找的内容，可以使用选择标签的方式进行，比如在进行注册一款新的网页时，我们就会发现有一个兴趣爱好的标签选择；本文作者分享了关于制作中继器标签的方法，我们一起来了解一下。

标签像是目标确定的关键字词，便于查找和定位目标的工具，用来标志产品目标和分类或内容，绑定合适的话题，能方便分类检索，也更容易让用户发现。

随着大数据的发展，标签应用于更大软件系统，所以今天作者教大家在axure里面用中继器制作高保真的标签，包括选择已有标签，输入新增标签，删除已添加的标签。

具体效果如下图所示：

原型地址：https://xy0uki.axshare.com

一、材料准备

中继器1——添加标签的中继器，内部包含矩形（标签文本1）和关闭按钮，标签文本1的样式可自由设置，案例中为外框线蓝色，填充颜色为浅蓝色，圆角，中继器表格中默认一列Column0，因为默认显示没有标签，删除所有标签行。

中继器2——已有标签的中继器，内部进包含矩形（标签文本2），样式可自由设置，案例中为外框线蓝色，填充颜色为浅蓝色，选中颜色为灰色，字体白色加粗，中继器表格中除了默认一列Column0外，还需要增加xuanzhong列，用于控制标签是否被选中；因为是已有可以选择的标签，所以Column0需要填写推荐选择的标签文字。

输入框——通过输入添加标签，默认隐藏边框，默认提示与：按回车创建标签。

默认隐藏按钮——仅用于触发事件，后面交互会详细介绍，包括筛选事件按钮、判断是否重复事件按钮、移动事件按钮、添加行事件按钮。

提示标签——用于输入重复标签时显示提示弹窗，转为动态面板，固定在中部。

外框（非必要）——用于美化，根据需求自由设置。

文字标签（非必要）——例如选择标签的文字，仅用于提示。

二、交互设置

1. 中继器1每项加载时

在中继器1每项加载时，我们需要将中继器里记录的内容设置到标签文本1内，然后根据文字的长短设置标签文本1的尺寸以及关闭按钮的位置：

设置文本——设置标签文本1的值==Item.Column0。

设置尺寸——设置标签文本1的尺寸，宽==Item.Column0.length*14+40，高度保持原来不变。其中Item.Column0.length就是文本的长度，因为我们使用的是14号字体所以乘以14，然后两边个预留10的边距，所以+20，最后再预留关闭按钮+20的间距。

移动——移动关闭按钮到绝对位置，x值=Item.Column0.length*14+40-20，y值保持不变。

2. 文本框提交时事件

首先我们将文本框提交按钮设为设置为筛选事件按钮，当按键盘的回车键时就相当于鼠标单击筛选事件按钮。

下面简单的讲解一下交互思路，首先回车按下时，我们先筛选中继器看有没有和输入内容一样的列，如果有一样的，弹出提示弹窗；如果没有一样的时候，我们移除筛选，并判断输入框内容是否为空，如果为空，代表用户没有输入内容，不做处理；如果不为空，则将文本框内容添加行。完成后设置文本框内容为空，并且移动输入框到标签后面。

筛选——对中继器1筛选，条件为Item.Column0==LVAR1，LVAR1为文本框内容。

触发——触发是否重复事件鼠标单击时。

是否重复事件鼠标单击时——判断中继器可视行数是否为0，如果为0就取消筛选、触发增加行鼠标单击时事件，如果不为0，则显示提示标签，并且设置复原文本框并取消筛选。

添加行事件——如果文本框内容不为空，添加行为文本框内容，触发移动事件，还需要更新标签中继器二看看里面有没有和输入内容一致的，如果有就要选中；下面将标签中继器2是会详细讲到，这里更新行的条件为[[TargetItem.Column0==LVAR1]]，更新xuanzhong列的值为1，最后将文本框复原为空值。

移动事件——将文本框移动到绝对位置，x坐标=LVAR1.x+LVAR1.width+10，y坐标保持不变，LVAR1.x代表中继器1的x值，LVAR1.width代表中继器1的宽，整体意思为将文本框移动到中继器后面。

3. 关闭按钮鼠标单击时事件

在关闭该标签时，首先要考虑是否有标签是在下方选择标签内选中的，如果有需要取消其选中，然后删除该行的标签，再出发移动事件，将文本框移到对应位置。

更新行——更新中继器2，条件为Item.Column0==TargetItem.Column0，更新xuanzhong列为0，即相同的文字的标签会取消选中效果。

删除行——删除中继器1的当前行。

触发事件——触发移动事件（将文本框移动到绝对位置，x坐标=LVAR1.x+LVAR1.width+10，y坐标保持不变，LVAR1.x代表中继器1的x值，LVAR1.width代表中继器1的宽，整体意思为将文本框移动到中继器后面）。

4. 中继器2每项加载时

设置文本——设置文本标签2的值==Item.Column0。

设置尺寸——设置文本标签2的尺寸，宽==Item.Column0.length*14+40，高度保持原来不变。其中Item.Column0.length就是文本的长度，因为我们使用的是14号字体所以乘以14，然后两边个预留10的边距，所以+20。

选中——如果xuanzhong列的值为1，设置文本标签2的值为真。简单来说，我们是通过xuanzhong列的值控制推荐标签里的标签是否被选中，如果值为1就选中，不为1就未选中。

5. 文本标签2鼠标单击时

如果xuanzhong的值不等于1，就是标签还未被选中，那我们进行一下交互：

更新行——更新标签中继器当前行xuanzhong的值为1。

设置文本——设置输入框的文本为当前标签的文本，也可以是column0列的值。

触发事件——触发筛选事件鼠标单击时。

设置文本和触发事件的意思，其实相当于我们在输入框内输入已选中标签的文字，然后按回车，应为上面已经写好了输入增加标签的交互，这里直接触发，不用重新写，也是一种快速实现的方式。

那以上就是本期的所有内容了，感谢您的阅读，我们下期见，88~

本文由 @做产品但不是经理 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。