标签像是目标确定的关键字词，便于查找和定位目标的工具，用来标志产品目标和分类或内容，绑定合适的话题，能方便分类检索，也更容易让用户发现。
随着大数据的发展，标签应用于更大软件系统，所以今天作者教大家在axure里面用中继器制作高保真的标签，包括选择已有标签，输入新增标签，删除已添加的标签。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/5b914b5d3b727052/#g=1
【原型下载】
方式2：https://weidian.com/item.html?itemID=4397836492
【原型效果】
【原型教程】
一、材料准备
中继器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~
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
