編輯導(dǎo)語(yǔ)：我們?cè)谑褂酶鞣N軟件或者網(wǎng)頁(yè)時(shí)，面對(duì)我們要去查找的內(nèi)容，可以使用選擇標(biāo)簽的方式進(jìn)行，比如在進(jìn)行注冊(cè)一款新的網(wǎng)頁(yè)時(shí)，我們就會(huì)發(fā)現(xiàn)有一個(gè)興趣愛(ài)好的標(biāo)簽選擇；本文作者分享了關(guān)于制作中繼器標(biāo)簽的方法，我們一起來(lái)了解一下。

標(biāo)簽像是目標(biāo)確定的關(guān)鍵字詞，便于查找和定位目標(biāo)的工具，用來(lái)標(biāo)志產(chǎn)品目標(biāo)和分類或內(nèi)容，綁定合適的話題，能方便分類檢索，也更容易讓用戶發(fā)現(xiàn)。

隨著大數(shù)據(jù)的發(fā)展，標(biāo)簽應(yīng)用于更大軟件系統(tǒng)，所以今天作者教大家在axure里面用中繼器制作高保真的標(biāo)簽，包括選擇已有標(biāo)簽，輸入新增標(biāo)簽，刪除已添加的標(biāo)簽。

具體效果如下圖所示：

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

一、材料準(zhǔn)備

中繼器1——添加標(biāo)簽的中繼器，內(nèi)部包含矩形（標(biāo)簽文本1）和關(guān)閉按鈕，標(biāo)簽文本1的樣式可自由設(shè)置，案例中為外框線藍(lán)色，填充顏色為淺藍(lán)色，圓角，中繼器表格中默認(rèn)一列Column0，因?yàn)槟J(rèn)顯示沒(méi)有標(biāo)簽，刪除所有標(biāo)簽行。

中繼器2——已有標(biāo)簽的中繼器，內(nèi)部進(jìn)包含矩形（標(biāo)簽文本2），樣式可自由設(shè)置，案例中為外框線藍(lán)色，填充顏色為淺藍(lán)色，選中顏色為灰色，字體白色加粗，中繼器表格中除了默認(rèn)一列Column0外，還需要增加xuanzhong列，用于控制標(biāo)簽是否被選中；因?yàn)槭且延锌梢赃x擇的標(biāo)簽，所以Column0需要填寫推薦選擇的標(biāo)簽文字。

輸入框——通過(guò)輸入添加標(biāo)簽，默認(rèn)隱藏邊框，默認(rèn)提示與：按回車創(chuàng)建標(biāo)簽。

默認(rèn)隱藏按鈕——僅用于觸發(fā)事件，后面交互會(huì)詳細(xì)介紹，包括篩選事件按鈕、判斷是否重復(fù)事件按鈕、移動(dòng)事件按鈕、添加行事件按鈕。

提示標(biāo)簽——用于輸入重復(fù)標(biāo)簽時(shí)顯示提示彈窗，轉(zhuǎn)為動(dòng)態(tài)面板，固定在中部。

外框（非必要）——用于美化，根據(jù)需求自由設(shè)置。

文字標(biāo)簽（非必要）——例如選擇標(biāo)簽的文字，僅用于提示。

二、交互設(shè)置

1. 中繼器1每項(xiàng)加載時(shí)

在中繼器1每項(xiàng)加載時(shí)，我們需要將中繼器里記錄的內(nèi)容設(shè)置到標(biāo)簽文本1內(nèi)，然后根據(jù)文字的長(zhǎng)短設(shè)置標(biāo)簽文本1的尺寸以及關(guān)閉按鈕的位置：

設(shè)置文本——設(shè)置標(biāo)簽文本1的值==Item.Column0。

設(shè)置尺寸——設(shè)置標(biāo)簽文本1的尺寸，寬==Item.Column0.length*14+40，高度保持原來(lái)不變。其中Item.Column0.length就是文本的長(zhǎng)度，因?yàn)槲覀兪褂玫氖?4號(hào)字體所以乘以14，然后兩邊個(gè)預(yù)留10的邊距，所以+20，最后再預(yù)留關(guān)閉按鈕+20的間距。

移動(dòng)——移動(dòng)關(guān)閉按鈕到絕對(duì)位置，x值=Item.Column0.length*14+40-20，y值保持不變。

2. 文本框提交時(shí)事件

首先我們將文本框提交按鈕設(shè)為設(shè)置為篩選事件按鈕，當(dāng)按鍵盤的回車鍵時(shí)就相當(dāng)于鼠標(biāo)單擊篩選事件按鈕。

下面簡(jiǎn)單的講解一下交互思路，首先回車按下時(shí)，我們先篩選中繼器看有沒(méi)有和輸入內(nèi)容一樣的列，如果有一樣的，彈出提示彈窗；如果沒(méi)有一樣的時(shí)候，我們移除篩選，并判斷輸入框內(nèi)容是否為空，如果為空，代表用戶沒(méi)有輸入內(nèi)容，不做處理；如果不為空，則將文本框內(nèi)容添加行。完成后設(shè)置文本框內(nèi)容為空，并且移動(dòng)輸入框到標(biāo)簽后面。

篩選——對(duì)中繼器1篩選，條件為Item.Column0==LVAR1，LVAR1為文本框內(nèi)容。

觸發(fā)——觸發(fā)是否重復(fù)事件鼠標(biāo)單擊時(shí)。

是否重復(fù)事件鼠標(biāo)單擊時(shí)——判斷中繼器可視行數(shù)是否為0，如果為0就取消篩選、觸發(fā)增加行鼠標(biāo)單擊時(shí)事件，如果不為0，則顯示提示標(biāo)簽，并且設(shè)置復(fù)原文本框并取消篩選。

添加行事件——如果文本框內(nèi)容不為空，添加行為文本框內(nèi)容，觸發(fā)移動(dòng)事件，還需要更新標(biāo)簽中繼器二看看里面有沒(méi)有和輸入內(nèi)容一致的，如果有就要選中；下面將標(biāo)簽中繼器2是會(huì)詳細(xì)講到，這里更新行的條件為[[TargetItem.Column0==LVAR1]]，更新xuanzhong列的值為1，最后將文本框復(fù)原為空值。

移動(dòng)事件——將文本框移動(dòng)到絕對(duì)位置，x坐標(biāo)=LVAR1.x+LVAR1.width+10，y坐標(biāo)保持不變，LVAR1.x代表中繼器1的x值，LVAR1.width代表中繼器1的寬，整體意思為將文本框移動(dòng)到中繼器后面。

3. 關(guān)閉按鈕鼠標(biāo)單擊時(shí)事件

在關(guān)閉該標(biāo)簽時(shí)，首先要考慮是否有標(biāo)簽是在下方選擇標(biāo)簽內(nèi)選中的，如果有需要取消其選中，然后刪除該行的標(biāo)簽，再出發(fā)移動(dòng)事件，將文本框移到對(duì)應(yīng)位置。

更新行——更新中繼器2，條件為Item.Column0==TargetItem.Column0，更新xuanzhong列為0，即相同的文字的標(biāo)簽會(huì)取消選中效果。

刪除行——?jiǎng)h除中繼器1的當(dāng)前行。

觸發(fā)事件——觸發(fā)移動(dòng)事件（將文本框移動(dòng)到絕對(duì)位置，x坐標(biāo)=LVAR1.x+LVAR1.width+10，y坐標(biāo)保持不變，LVAR1.x代表中繼器1的x值，LVAR1.width代表中繼器1的寬，整體意思為將文本框移動(dòng)到中繼器后面）。

4. 中繼器2每項(xiàng)加載時(shí)

設(shè)置文本——設(shè)置文本標(biāo)簽2的值==Item.Column0。

設(shè)置尺寸——設(shè)置文本標(biāo)簽2的尺寸，寬==Item.Column0.length*14+40，高度保持原來(lái)不變。其中Item.Column0.length就是文本的長(zhǎng)度，因?yàn)槲覀兪褂玫氖?4號(hào)字體所以乘以14，然后兩邊個(gè)預(yù)留10的邊距，所以+20。

選中——如果xuanzhong列的值為1，設(shè)置文本標(biāo)簽2的值為真。簡(jiǎn)單來(lái)說(shuō)，我們是通過(guò)xuanzhong列的值控制推薦標(biāo)簽里的標(biāo)簽是否被選中，如果值為1就選中，不為1就未選中。

5. 文本標(biāo)簽2鼠標(biāo)單擊時(shí)

如果xuanzhong的值不等于1，就是標(biāo)簽還未被選中，那我們進(jìn)行一下交互：

更新行——更新標(biāo)簽中繼器當(dāng)前行xuanzhong的值為1。

設(shè)置文本——設(shè)置輸入框的文本為當(dāng)前標(biāo)簽的文本，也可以是column0列的值。

觸發(fā)事件——觸發(fā)篩選事件鼠標(biāo)單擊時(shí)。

設(shè)置文本和觸發(fā)事件的意思，其實(shí)相當(dāng)于我們?cè)谳斎肟騼?nèi)輸入已選中標(biāo)簽的文字，然后按回車，應(yīng)為上面已經(jīng)寫好了輸入增加標(biāo)簽的交互，這里直接觸發(fā)，不用重新寫，也是一種快速實(shí)現(xiàn)的方式。

那以上就是本期的所有內(nèi)容了，感謝您的閱讀，我們下期見(jiàn)，88~

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。