雖然AXURE有自帶的數(shù)字輸入控件，但是axure自帶的交互和樣式可能與我們產(chǎn)品的整體效果不一樣，往往需要自己制作，那如何制作逼真的數(shù)字輸入框控件呢，我們一起看看吧~

如何實(shí)現(xiàn)數(shù)字輸入框效果具體教程

1、首先拖入一個(gè)矩形框，設(shè)置好線段顏色，并在右側(cè)操作欄設(shè)置【交互樣式設(shè)置】中的鼠標(biāo)懸停和選中效果，這邊我設(shè)置了鼠標(biāo)懸停和選中時(shí)“線段顏色”及“外部陰影”，如下圖所示:

2、再拖入一個(gè)矩形框，設(shè)置高度與寬度，并設(shè)置矩形填充顏色及邊框可見性，只顯示右邊的邊框，如下圖所示：

3、從元件庫(kù)拖入“減號(hào)”或者從網(wǎng)上下載“－”的圖標(biāo)，放置“步驟2”中的矩形框中，從元件庫(kù)中拖入“－”減號(hào)圖標(biāo)需要按需調(diào)整一下大小及顏色，將“步驟2”中的矩形框與減號(hào)圖標(biāo)設(shè)置為組合，如下圖所示：

4、接下來(lái)按照“步驟2”和“步驟3”制作“＋”號(hào)圖標(biāo)；復(fù)制“步驟2”中的矩形框，設(shè)置邊框可見性，在拖入“＋”圖標(biāo)，設(shè)置效果如下圖：

5、接著拖入一個(gè)文本框放置在中間剩余區(qū)域，設(shè)置文本框的名字為“數(shù)字輸入”，選中文本框，右鍵【隱藏邊框】

6、最后再拖入一個(gè)文本框放置在控件的右側(cè)，命名為“步長(zhǎng)”，文本框中根據(jù)你需要自動(dòng)增加或者減少的數(shù)值進(jìn)行輸入（假設(shè)輸入1 ，則點(diǎn)擊加號(hào)時(shí)，文本框自動(dòng)加1）；我這邊輸入“1”，輸入完成之后，隱藏該控件。

7、接下來(lái)需要設(shè)置交互邏輯，實(shí)現(xiàn)數(shù)值的自動(dòng)相加和相減 8、點(diǎn)擊“＋”圖標(biāo)組合，點(diǎn)擊【鼠標(biāo)點(diǎn)擊時(shí)】，彈窗中點(diǎn)擊【設(shè)置文本】，勾選“數(shù)字輸入”，再點(diǎn)擊“fx”設(shè)置公式： 8.1首先點(diǎn)擊添加局部變量，將LVAR1元件文字設(shè)置為“數(shù)字輸入”； 8.2 再將LVAR2原件文字設(shè)置為“步長(zhǎng)器”； 8.3 最后在點(diǎn)擊上方的公示輸入框中設(shè)置公示“[[LVAR1+LVAR2]]”,操作確認(rèn)后完成設(shè)置

9、“＋”圖標(biāo)公示設(shè)置完成之后，在點(diǎn)擊“－”圖標(biāo)組合，點(diǎn)擊【鼠標(biāo)點(diǎn)擊時(shí)】設(shè)置交互效果，參考“步驟8”中的方式完成設(shè)置，有兩種方式： 9.1 方式一： 9.1.1 彈窗中點(diǎn)擊【設(shè)置文本】，勾選“數(shù)字輸入”，再點(diǎn)擊“fx”設(shè)置公式： 9.1.2首先點(diǎn)擊添加局部變量，將LVAR1元件文字設(shè)置為“數(shù)字輸入”； 9.1.3 再將LVAR2原件文字設(shè)置為“步長(zhǎng)器”； 9.1.4 最后在點(diǎn)擊上方的公示輸入框中設(shè)置公示“[[LVAR1-LVAR2]]”,操作確認(rèn)后完成設(shè)置

9.2 方式二： 9.2.1 點(diǎn)擊“＋”圖標(biāo)，在交互效果-鼠標(biāo)單擊時(shí)-Case1中右鍵點(diǎn)擊【復(fù)制】，或者點(diǎn)擊Case1按住“Ctrl+C”鍵

9.2.2 再點(diǎn)擊“－”圖標(biāo)，點(diǎn)擊【鼠標(biāo)點(diǎn)擊時(shí)】，再右鍵點(diǎn)擊【粘貼】，將“＋”圖標(biāo)中的效果復(fù)制過來(lái)進(jìn)行修改

9.2.3 粘貼成功后，雙擊交互效果，彈窗進(jìn)行修改公示，將"[[LVAR1+LVAR2]]"修改為“[[LVAR1-LVAR2]]”

10、設(shè)置成功后，按住“F5”預(yù)覽交互效果；

11 此時(shí)矩形框的之前設(shè)置的懸停及選中效果并沒有展示出來(lái)，還需要最后一步，即選中將所有控件設(shè)置組合，并勾選“允許觸發(fā)鼠標(biāo)交互”，

12 最后，預(yù)覽查看效果如下：

三、拓展說明： 1、按照上述方式，也可以設(shè)計(jì)出上下操作數(shù)字自動(dòng)增加或者減少，只需要修改下圖標(biāo)即可

2、如果不需要制作逼真的效果，可直接使用axure自帶的控件，即拖入一個(gè)文本框，在右側(cè)設(shè)置類型為“Number”即可?