閱讀(4.4k) 書簽贊(0) 我要糾錯

ElementPlus Dropdown 下拉菜單

2021-09-26 17:32 更新

Dropdown 下拉菜單

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

基礎用法

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

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

<template>
  <el-dropdown>
  <span class="el-dropdown-link">
    下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

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

觸發(fā)對象

可使用按鈕觸發(fā)下拉菜單。

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

<template>
  <el-dropdown>
  <el-button type="primary">
    更多菜單<i class="el-icon-arrow-down el-icon--right"></i>
  </el-button>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
  更多菜單
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        alert('button click')
      },
    },
  }
</script>
<style>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

觸發(fā)方式

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

在trigger屬性設置為click即可。

<template>
  <el-row class="block-col-2">
  <el-col :span="8">
    <span class="demonstration">hover 激活</span>
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-plus">黃金糕</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">獅子頭</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline"
            >螺螄粉</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-check">雙皮奶</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-check"
            >蚵仔煎</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-col>
  <el-col :span="8">
    <span class="demonstration">click 激活</span>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-plus">黃金糕</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">獅子頭</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline"
            >螺螄粉</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-check">雙皮奶</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-check"
            >蚵仔煎</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-col>
  <el-col :span="8">
    <span class="demonstration">右鍵(contextmenu) 激活</span>
    <el-dropdown trigger="contextmenu">
      <span class="el-dropdown-link">
        下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-plus">黃金糕</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">獅子頭</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline"
            >螺螄粉</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-check">雙皮奶</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-check"
            >蚵仔煎</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-col>
</el-row>
</template>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

菜單隱藏方式

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

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

<template>
  <el-dropdown :hide-on-click="false">
  <span class="el-dropdown-link">
    下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

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

指令事件

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

<template>
  <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜單<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command)
      },
    },
  }
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

不同尺寸

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

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

<template>
  <el-dropdown split-button type="primary">
  默認尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>

<el-dropdown size="medium" split-button type="primary">
  中等尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>

<el-dropdown size="small" split-button type="primary">
  小型尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>

<el-dropdown size="mini" split-button type="primary">
  超小尺寸
  <template #dropdown>
    <el-dropdown-menu>
      <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>
  </template>
</el-dropdown>
</template>

Dropdown Attributes

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

Dropdown Slots

Name	說明
—	觸發(fā)下拉列表顯示的元素。注意：必須是一個元素或者或者組件
dropdown	下拉列表，通常是 `<el-dropdown-menu>` 組件

事件名稱	說明	回調(diào)參數(shù)
click	`split-button` 為 true 時，點擊左側(cè)按鈕的回調(diào)	—
command	點擊菜單項觸發(fā)的事件回調(diào)	dropdown-item 的指令
visible-change	下拉框出現(xiàn)/隱藏時觸發(fā)	出現(xiàn)則為 true，隱藏則為 false

參數(shù)	說明	類型	可選值	默認值
command	指令	string/number/object	—	—
disabled	禁用	boolean	—	false
divided	顯示分割線	boolean	—	false
icon	圖標類名	string	—	—

以上內(nèi)容是否對您有幫助：

← ElementPlus PageHeader 頁頭

ElementPlus Steps 步驟條 →

寫筆記

我要補充