元件— 下拉選單

基礎用法

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

觸發物件

<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>
 <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">
 預設尺寸
 <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

Dropdown Slots

Dropdown Events

Dropdown Menu Item Attributes

到此這篇關於Element Dropdown下拉選單的使用方法的文章就介紹到這了,更多相關Element Dropdown下拉選單內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！