將動(dòng)作或菜單折疊到下拉菜單中。

1.如何使用？

移動(dòng)到下拉菜單上，展開(kāi)更多操作。

//通過(guò)組件slot來(lái)設(shè)置下拉觸發(fā)的元素以及需要通過(guò)具名slot為dropdown 來(lái)設(shè)置下拉菜單。默認(rèn)情況下，下拉按鈕只要hover即可，無(wú)需點(diǎn)擊也會(huì)顯示下拉菜單。

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

2.觸發(fā)對(duì)象

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

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

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

3.觸發(fā)方式

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

在trigger屬性設(shè)置為click即可。

<el-row class="block-col-2">
  <el-col :span="12">
    <span class="demonstration">hover 激活</span>
    <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 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>
    </el-dropdown>
  </el-col>
  <el-col :span="12">
    <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>
      <el-dropdown-menu slot="dropdown">
        <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>
    </el-dropdown>
  </el-col>
</el-row>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

4.菜單隱藏方式

可以hide-on-click屬性來(lái)配置。

//下拉菜單默認(rèn)在點(diǎn)擊菜單項(xiàng)后會(huì)被隱藏，將hide-on-click屬性默認(rèn)為false可以關(guān)閉此功能。

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

5.指令事件

點(diǎn)擊菜單項(xiàng)后會(huì)觸發(fā)事件，用戶可以通過(guò)相應(yīng)的菜單項(xiàng) key 進(jìn)行不同的操作

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

6.?不同尺寸

Dropdown 組件提供除了默認(rèn)值以外的三種尺寸，可以在不同場(chǎng)景下選擇合適的尺寸。

//額外的尺寸：medium、small、mini，通過(guò)設(shè)置size屬性來(lái)配置它們。

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

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-696294.html

到了這里，關(guān)于ElementUI淺嘗輒止28：Dropdown 下拉菜單的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！