快捷導(dǎo)航

Element Dropdown下拉菜單的使用方法

更新時間：2020年07月26日 16:08:08 作者：ForeverJPB.

這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件— 下拉菜單

基礎(chǔ)用法

<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ā)對象

<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ā)方式

<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>

菜單隱藏方式

<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>

指令事件

<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>

不同尺寸

<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