最近看到一篇文章，關(guān)于下拉框聯(lián)動的問題，個人覺得使用動態(tài)面板狀態(tài)使用起來不太方便，也不便于擴(kuò)充，所以就自制了一個多級菜單聯(lián)動的元件出來，與大家共享一下。如果大家有什么想要做的小功能或元件可以留言告訴我，我們可以一起動手。

預(yù)覽

一、元件準(zhǔn)備

1、文本框一個。用于構(gòu)建下拉框使用，命名“一級”，設(shè)置成只讀狀態(tài)；

2、矩形框兩個。用于構(gòu)建下拉框使用，只是為了構(gòu)建下拉框右側(cè)的下三角使用，這里就不用命名了，一個設(shè)置成倒三角性狀，并將兩個矩形框與“一級”文本框組合起來；

3、動態(tài)面板一個。命名“一級”，用于顯示下拉框需要展示的內(nèi)容，設(shè)置成隱藏狀態(tài)；

4、中繼器一個。命名“一級”用于存放下拉框的內(nèi)容。將“一級”中繼器放到“一級”動態(tài)面板中，且在“一級”中繼器里面放置一個矩形框；

二、添加用例

1、組合添加用例。點擊時顯示“一級”動態(tài)面板；

2、“一級”動態(tài)面板添加用例。鼠標(biāo)移出“一級”動態(tài)面板時，隱藏“一級”動態(tài)面板；

3、“一級”中繼器添加用例。中繼器在每項加載時，將內(nèi)容放置到中繼器中的矩形框上，并且去判斷是否為第一項，如果為第一項則設(shè)置成默認(rèn)項，將該項的內(nèi)容賦給“一級”文本框；

4、到這里我們就可以直接復(fù)制了，復(fù)制出二級、三級……來，本文案例是三級聯(lián)動，所以就復(fù)制出來二級、三級就好了。記得要把名字改過來哈，并且要注意的是二級、三級中繼器里面的字段，看截圖(一級的在上面的圖上也有哦)；

5、中繼器中的無名矩形框添加用例。在鼠標(biāo)點擊無名矩形框時，將文字設(shè)置給“一級”文本框，并隱藏掉“一級”動態(tài)面板，如果存在多級，則需要根據(jù)選中的內(nèi)容去過濾下級的內(nèi)容，本文案例是三級聯(lián)動，所以這里就有二級和三級的過濾；

①添加二級篩選；

②添加三級過濾；

6、二級組合框添加用例。根據(jù)選擇的一級內(nèi)容篩選二級；

7、二級中繼器添加用例；

8、二級中繼器中的無名矩形框添加用例；

9、下面的以此類推，這里就不寫了。

三、預(yù)覽

直接F5或鼠標(biāo)點擊預(yù)覽按鈕，開始體驗吧~

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