編輯導(dǎo)讀：下拉菜單是產(chǎn)品的一個(gè)基礎(chǔ)功能，能夠給用戶(hù)提供多種選項(xiàng)。本文作者介紹了如何設(shè)計(jì)構(gòu)建一個(gè)下拉菜單的動(dòng)作，希望對(duì)你有幫助。

一、效果預(yù)覽

原型預(yù)覽地址：http://www.atomstudio.cn/demos/elementui_dropdownmenu/

二、準(zhǔn)備工作

已安裝xstar組件庫(kù)2021.12.24版（或更高版本）。

三、詳細(xì)教程

1. 功能說(shuō)明

• 鼠標(biāo)經(jīng)過(guò)按鈕時(shí)，顯示下拉菜單
• 下拉選項(xiàng)中包含圖標(biāo)
• 點(diǎn)擊選項(xiàng)，跳轉(zhuǎn)頁(yè)面

2. 操作說(shuō)明

放置“下拉菜單”元件

從組件列表中選擇【ElementUI元件庫(kù)】，在組件列表中會(huì)顯示出組件列表。從中找到下拉菜單組件，并拖拽到編輯區(qū)中。

設(shè)置菜單名稱(chēng)

（1） 在編輯區(qū)中選中下拉菜單組件。

（2） 在右側(cè)屬性設(shè)置面板中，設(shè)置菜單名稱(chēng)。

設(shè)置菜單樣式

在樣式列表中選擇需要的樣式，可選樣式包括：默認(rèn)樣式、主要樣式、成功樣式、警告樣式、錯(cuò)誤樣式、信息樣式、鏈接樣式。

樣式選擇后，效果如下：

設(shè)置菜單選項(xiàng)卡-名稱(chēng)

（1） 點(diǎn)擊“編輯數(shù)據(jù)項(xiàng)”按鈕，打開(kāi)選項(xiàng)卡設(shè)置窗口。

（2） 選擇對(duì)應(yīng)的選項(xiàng)卡，在右側(cè)名稱(chēng)輸入框中輸入需要的名稱(chēng)，點(diǎn)擊確認(rèn)按鈕

設(shè)置選項(xiàng)卡圖標(biāo)

點(diǎn)擊圖標(biāo)后面的 “選擇”按鈕，打開(kāi)圖標(biāo)選擇窗口，在分類(lèi)中選擇分類(lèi)，在圖標(biāo)區(qū)選中需要的圖標(biāo)，點(diǎn)擊“選擇”按鈕。

分割線設(shè)置

選擇分隔線選項(xiàng)，則在選項(xiàng)上方會(huì)出現(xiàn)一條線將其他選項(xiàng)與此選項(xiàng)分隔開(kāi)。

禁用設(shè)置

勾選禁用選項(xiàng)后，對(duì)應(yīng)的選項(xiàng)變成不可點(diǎn)擊狀態(tài)。

交互動(dòng)作設(shè)置

（1） 創(chuàng)建新頁(yè)面

（2）編輯新頁(yè)面，用于識(shí)別是否完成交互動(dòng)作，這里只在新頁(yè)面放置一段文本。

（3） 在頁(yè)面1中放置一個(gè)頁(yè)面容器，用以顯示交互頁(yè)面。

（4）打開(kāi)菜單的數(shù)據(jù)項(xiàng)編輯窗口，進(jìn)行交互動(dòng)作設(shè)置。交互動(dòng)作包括當(dāng)前頁(yè)鏈接、容器內(nèi)鏈接、父框架鏈接。

（5）設(shè)置當(dāng)前頁(yè)鏈接的交互方式。

（6）設(shè)置容器內(nèi)鏈接的交互方式

（7）設(shè)置完成 點(diǎn)擊確定按鈕。

3. 預(yù)覽效果

按鍵盤(pán)上的F5鍵，或者點(diǎn)擊右上角的預(yù)覽按鈕進(jìn)行預(yù)覽。

瀏覽效果

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

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