溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用Element Dropdown下拉菜單

發(fā)布時(shí)間：2020-07-27 13:55:19 來源：億速云 閱讀：469 作者：小豬 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了如何使用Element Dropdown下拉菜單，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

組件— 下拉菜單

基礎(chǔ)用法

如何使用Element Dropdown下拉菜單

<el-dropdown>
 <span class="el-dropdown-link">
  下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 </span>
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item disabled>雙皮奶</el-dropdown-item>
  <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<style>
 .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

觸發(fā)對象

如何使用Element Dropdown下拉菜單

<el-dropdown>
 <el-button type="primary">
  更多菜單<i class="el-icon-arrow-down el-icon--right"></i>
 </el-button>
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
 更多菜單
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<style>
 .el-dropdown {
  vertical-align: top;
 }
 .el-dropdown + .el-dropdown {
  margin-left: 15px;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

<script>
 export default {
  methods: {
   handleClick() {
    alert('button click');
   }
  }
 }
</script>

觸發(fā)方式

如何使用Element Dropdown下拉菜單

<el-dropdown>
 <el-button type="primary">
  更多菜單<i class="el-icon-arrow-down el-icon--right"></i>
 </el-button>
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
 更多菜單
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<style>
 .el-dropdown {
  vertical-align: top;
 }
 .el-dropdown + .el-dropdown {
  margin-left: 15px;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

<script>
 export default {
  methods: {
   handleClick() {
    alert('button click');
   }
  }
 }
</script>

菜單隱藏方式

如何使用Element Dropdown下拉菜單

<el-dropdown :hide-on-click="false">
 <span class="el-dropdown-link">
  下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 </span>
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item disabled>雙皮奶</el-dropdown-item>
  <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<style>
 .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

指令事件

如何使用Element Dropdown下拉菜單

<el-dropdown @command="handleCommand">
 <span class="el-dropdown-link">
  下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
 </span>
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item command="a">黃金糕</el-dropdown-item>
  <el-dropdown-item command="b">獅子頭</el-dropdown-item>
  <el-dropdown-item command="c">螺螄粉</el-dropdown-item>
  <el-dropdown-item command="d" disabled>雙皮奶</el-dropdown-item>
  <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<style>
 .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
 }
 .el-icon-arrow-down {
  font-size: 12px;
 }
</style>

<script>
 export default {
  methods: {
   handleCommand(command) {
    this.$message('click on item ' + command);
   }
  }
 }
</script>

不同尺寸

如何使用Element Dropdown下拉菜單

<el-dropdown split-button type="primary">
 默認(rèn)尺寸
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<el-dropdown size="medium" split-button type="primary">
 中等尺寸
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<el-dropdown size="small" split-button type="primary">
 小型尺寸
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

<el-dropdown size="mini" split-button type="primary">
 超小尺寸
 <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>黃金糕</el-dropdown-item>
  <el-dropdown-item>獅子頭</el-dropdown-item>
  <el-dropdown-item>螺螄粉</el-dropdown-item>
  <el-dropdown-item>雙皮奶</el-dropdown-item>
  <el-dropdown-item>蚵仔煎</el-dropdown-item>
 </el-dropdown-menu>
</el-dropdown>

Dropdown Attributes

如何使用Element Dropdown下拉菜單

Dropdown Slots

如何使用Element Dropdown下拉菜單

Dropdown Events

如何使用Element Dropdown下拉菜單

Dropdown Menu Item Attributes

如何使用Element Dropdown下拉菜單

以上就是關(guān)于如何使用Element Dropdown下拉菜單的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手