Dropdown 下拉菜單

本文轉載自查看原文 2018-03-14 07:28 14973 Navigation組件

將動作或菜單折疊到下拉菜單中。

基礎用法

移動到下拉菜單上，展開更多操作。

通過組件slot來設置下拉觸發的元素以及需要通過具名slot為dropdown 來設置下拉菜單。默認情況下，下拉按鈕只要hover即可，無需點擊也會顯示下拉菜單。

 1 <el-dropdown>
 2   <span class="el-dropdown-link">
 3     下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 4   </span>
 5   <el-dropdown-menu slot="dropdown">
 6     <el-dropdown-item>黃金糕</el-dropdown-item>
 7     <el-dropdown-item>獅子頭</el-dropdown-item>
 8     <el-dropdown-item>螺螄粉</el-dropdown-item>
 9     <el-dropdown-item disabled>雙皮奶</el-dropdown-item>
10     <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
11   </el-dropdown-menu>
12 </el-dropdown>

View Code

觸發對象

可使用按鈕觸發下拉菜單。

設置split-button屬性來讓觸發下拉元素呈現為按鈕組，左邊是功能按鈕，右邊是觸發下拉菜單的按鈕，設置為true即可。

 1 <el-dropdown>
 2   <el-button type="primary">
 3     更多菜單<i class="el-icon-arrow-down el-icon--right"></i>
 4   </el-button>
 5   <el-dropdown-menu slot="dropdown">
 6     <el-dropdown-item>黃金糕</el-dropdown-item>
 7     <el-dropdown-item>獅子頭</el-dropdown-item>
 8     <el-dropdown-item>螺螄粉</el-dropdown-item>
 9     <el-dropdown-item>雙皮奶</el-dropdown-item>
10     <el-dropdown-item>蚵仔煎</el-dropdown-item>
11   </el-dropdown-menu>
12 </el-dropdown>
13 <el-dropdown split-button type="primary" @click="handleClick">
14   更多菜單
15   <el-dropdown-menu slot="dropdown">
16     <el-dropdown-item>黃金糕</el-dropdown-item>
17     <el-dropdown-item>獅子頭</el-dropdown-item>
18     <el-dropdown-item>螺螄粉</el-dropdown-item>
19     <el-dropdown-item>雙皮奶</el-dropdown-item>
20     <el-dropdown-item>蚵仔煎</el-dropdown-item>
21   </el-dropdown-menu>
22 </el-dropdown>
23 
24 <style>
25   .el-dropdown {
26     vertical-align: top;
27   }
28   .el-dropdown + .el-dropdown {
29     margin-left: 15px;
30   }
31   .el-icon-arrow-down {
32     font-size: 12px;
33   }
34 </style>
35 
36 <script>
37   export default {
38     methods: {
39       handleClick() {
40         alert('button click');
41       }
42     }
43   }
44 </script>

View Code

觸發方式

可以配置 click 激活或者 hover 激活。

在trigger屬性設置為click即可。

 1 <el-row class="block-col-2">
 2   <el-col :span="12">
 3     <span class="demonstration">hover 激活</span>
 4     <el-dropdown>
 5       <span class="el-dropdown-link">
 6         下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 7       </span>
 8       <el-dropdown-menu slot="dropdown">
 9         <el-dropdown-item>黃金糕</el-dropdown-item>
10         <el-dropdown-item>獅子頭</el-dropdown-item>
11         <el-dropdown-item>螺螄粉</el-dropdown-item>
12         <el-dropdown-item>雙皮奶</el-dropdown-item>
13         <el-dropdown-item>蚵仔煎</el-dropdown-item>
14       </el-dropdown-menu>
15     </el-dropdown>
16   </el-col>
17   <el-col :span="12">
18     <span class="demonstration">click 激活</span>
19     <el-dropdown trigger="click">
20       <span class="el-dropdown-link">
21         下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
22       </span>
23       <el-dropdown-menu slot="dropdown">
24         <el-dropdown-item>黃金糕</el-dropdown-item>
25         <el-dropdown-item>獅子頭</el-dropdown-item>
26         <el-dropdown-item>螺螄粉</el-dropdown-item>
27         <el-dropdown-item>雙皮奶</el-dropdown-item>
28         <el-dropdown-item>蚵仔煎</el-dropdown-item>
29       </el-dropdown-menu>
30     </el-dropdown>
31   </el-col>
32 </el-row>

View Code

菜單隱藏方式

可以hide-on-click屬性來配置。

下拉菜單默認在點擊菜單項后會被隱藏，將hide-on-click屬性默認為false可以關閉此功能。

 1 <el-dropdown :hide-on-click="false">
 2   <span class="el-dropdown-link">
 3     下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 4   </span>
 5   <el-dropdown-menu slot="dropdown">
 6     <el-dropdown-item>黃金糕</el-dropdown-item>
 7     <el-dropdown-item>獅子頭</el-dropdown-item>
 8     <el-dropdown-item>螺螄粉</el-dropdown-item>
 9     <el-dropdown-item disabled>雙皮奶</el-dropdown-item>
10     <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
11   </el-dropdown-menu>
12 </el-dropdown>
13 
14 <style>
15   .el-dropdown-link {
16     cursor: pointer;
17     color: #409EFF;
18   }
19   .el-icon-arrow-down {
20     font-size: 12px;
21   }
22 </style>

View Code

指令事件

點擊菜單項后會觸發事件，用戶可以通過相應的菜單項 key 進行不同的操作

 1 <el-dropdown @command="handleCommand">
 2   <span class="el-dropdown-link">
 3     下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 4   </span>
 5   <el-dropdown-menu slot="dropdown">
 6     <el-dropdown-item command="a">黃金糕</el-dropdown-item>
 7     <el-dropdown-item command="b">獅子頭</el-dropdown-item>
 8     <el-dropdown-item command="c">螺螄粉</el-dropdown-item>
 9     <el-dropdown-item command="d" disabled>雙皮奶</el-dropdown-item>
10     <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
11   </el-dropdown-menu>
12 </el-dropdown>
13 
14 <style>
15   .el-dropdown-link {
16     cursor: pointer;
17     color: #409EFF;
18   }
19   .el-icon-arrow-down {
20     font-size: 12px;
21   }
22 </style>
23 
24 <script>
25   export default {
26     methods: {
27       handleCommand(command) {
28         this.$message('click on item ' + command);
29       }
30     }
31   }
32 </script>

View Code

不同尺寸

Dropdown 組件提供除了默認值以外的三種尺寸，可以在不同場景下選擇合適的尺寸。

額外的尺寸：medium、small、mini，通過設置size屬性來配置它們。

 1 <el-dropdown split-button type="primary">
 2   默認尺寸
 3   <el-dropdown-menu slot="dropdown">
 4     <el-dropdown-item>黃金糕</el-dropdown-item>
 5     <el-dropdown-item>獅子頭</el-dropdown-item>
 6     <el-dropdown-item>螺螄粉</el-dropdown-item>
 7     <el-dropdown-item>雙皮奶</el-dropdown-item>
 8     <el-dropdown-item>蚵仔煎</el-dropdown-item>
 9   </el-dropdown-menu>
10 </el-dropdown>
11 
12 <el-dropdown size="medium" split-button type="primary">
13   中等尺寸
14   <el-dropdown-menu slot="dropdown">
15     <el-dropdown-item>黃金糕</el-dropdown-item>
16     <el-dropdown-item>獅子頭</el-dropdown-item>
17     <el-dropdown-item>螺螄粉</el-dropdown-item>
18     <el-dropdown-item>雙皮奶</el-dropdown-item>
19     <el-dropdown-item>蚵仔煎</el-dropdown-item>
20   </el-dropdown-menu>
21 </el-dropdown>
22 
23 <el-dropdown size="small" split-button type="primary">
24   小型尺寸
25   <el-dropdown-menu slot="dropdown">
26     <el-dropdown-item>黃金糕</el-dropdown-item>
27     <el-dropdown-item>獅子頭</el-dropdown-item>
28     <el-dropdown-item>螺螄粉</el-dropdown-item>
29     <el-dropdown-item>雙皮奶</el-dropdown-item>
30     <el-dropdown-item>蚵仔煎</el-dropdown-item>
31   </el-dropdown-menu>
32 </el-dropdown>
33 
34 <el-dropdown size="mini" split-button type="primary">
35   超小尺寸
36   <el-dropdown-menu slot="dropdown">
37     <el-dropdown-item>黃金糕</el-dropdown-item>
38     <el-dropdown-item>獅子頭</el-dropdown-item>
39     <el-dropdown-item>螺螄粉</el-dropdown-item>
40     <el-dropdown-item>雙皮奶</el-dropdown-item>
41     <el-dropdown-item>蚵仔煎</el-dropdown-item>
42   </el-dropdown-menu>
43 </el-dropdown>

View Code

參數	說明	類型	可選值	默認值
type	菜單按鈕類型，同 Button 組件(只在`split-button`為 true 的情況下有效)	string	—	—
size	菜單尺寸，在`split-button`為 true 的情況下也對觸發按鈕生效	string	medium / small / mini	—
split-button	下拉觸發元素呈現為按鈕組	boolean	—	false
placement	菜單彈出位置	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom-end
trigger	觸發下拉的行為	string	hover, click	hover
hide-on-click	是否在點擊菜單項后隱藏菜單	boolean	—	true
show-timeout	展開下拉菜單的延時（僅在 trigger 為 hover 時有效）	number	—	250
hide-timeout	收起下拉菜單的延時（僅在 trigger 為 hover 時有效）	number	—	150

事件名稱	說明	回調參數
click	`split-button` 為 true 時，點擊左側按鈕的回調	—
command	點擊菜單項觸發的事件回調	dropdown-item 的指令
visible-change	下拉框出現/隱藏時觸發	出現則為 true，隱藏則為 false

參數	說明	類型	可選值	默認值
command	指令	string/number/object	—	—
disabled	禁用	boolean	—	false
divided	顯示分割線	boolean	—	false

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ElementUI Dropdown 下拉菜單 Bootstrap--下拉菜單.dropdown Bootstrap-Plugin：下拉菜單（Dropdown）插件解決bootstrap dropdown 下拉菜單有時候不能顯示的問題 Mega Dropdown - 帶子分類的響應式下拉菜單 Element的Dropdown下拉菜單點擊不同選項控制菜單欄的顯示或隱藏 CSS 下拉菜單 mui下拉菜單折疊下拉菜單 CSS 下拉菜單：如何制作下拉菜單