起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識【原型元件】下拉菜單事件動作——設置詳解
編輯導讀：下拉菜單是產品的一個基礎功能，能夠給用戶提供多種選項。本文作者介紹了如何設計構建一個下拉菜單的動作，希望對你有幫助。
一、效果預覽
原型預覽地址：http://www.atomstudio.cn/demos/elementui_dropdownmenu/
二、準備工作
已安裝xstar組件庫2021.12.24版（或更高版本）。
三、詳細教程
1. 功能說明
- 鼠標經過按鈕時，顯示下拉菜單
- 下拉選項中包含圖標
- 點擊選項，跳轉頁面
2. 操作說明
放置“下拉菜單”元件
從組件列表中選擇【ElementUI元件庫】，在組件列表中會顯示出組件列表。從中找到下拉菜單組件，并拖拽到編輯區中。
設置菜單名稱
（1） 在編輯區中選中下拉菜單組件。
（2） 在右側屬性設置面板中，設置菜單名稱。
設置菜單樣式
在樣式列表中選擇需要的樣式，可選樣式包括：默認樣式、主要樣式、成功樣式、警告樣式、錯誤樣式、信息樣式、鏈接樣式。
樣式選擇后，效果如下：
設置菜單選項卡-名稱
（1） 點擊“編輯數據項”按鈕，打開選項卡設置窗口。
（2） 選擇對應的選項卡，在右側名稱輸入框中輸入需要的名稱，點擊確認按鈕
設置選項卡圖標
點擊圖標后面的 “選擇”按鈕，打開圖標選擇窗口，在分類中選擇分類，在圖標區選中需要的圖標，點擊“選擇”按鈕。
分割線設置
選擇分隔線選項，則在選項上方會出現一條線將其他選項與此選項分隔開。
禁用設置
勾選禁用選項后，對應的選項變成不可點擊狀態。
交互動作設置
（1） 創建新頁面
（2）編輯新頁面，用于識別是否完成交互動作，這里只在新頁面放置一段文本。
（3） 在頁面1中放置一個頁面容器，用以顯示交互頁面。
（4）打開菜單的數據項編輯窗口，進行交互動作設置。交互動作包括當前頁鏈接、容器內鏈接、父框架鏈接。
（5）設置當前頁鏈接的交互方式。
（6）設置容器內鏈接的交互方式
（7）設置完成 點擊確定按鈕。
3. 預覽效果
按鍵盤上的F5鍵，或者點擊右上角的預覽按鈕進行預覽。
本文由 @balabala 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
點贊