037_Dropdown下拉菜单

2024-02-18 21:22:04

1. Dropdown下拉菜单

1.1. Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。

1.2. Dropdown Attributes

参数

说明

类型

可选值

默认值

type

菜单按钮类型, 同Button组件(只在split-button为true的情况下有效)

string

无

无

size

菜单尺寸, 在split-button为true的情况下也对触发按钮生效

string

medium / small / mini

无

split-button

下拉触发元素呈现为按钮组

boolean

无

false

placement

菜单弹出位置

string

top/top-start/top-end/bottom/bottom-start/bottom-end

bottom-end

trigger

触发下拉的行为

string

hover, click

hover

hide-on-click

是否在点击菜单项后隐藏菜单

boolean

无

true

show-timeout

展开下拉菜单的延时(仅在trigger为hover时有效)

boolean

无

250

hide-timeout

收起下拉菜单的延时(仅在trigger为hover时有效)

boolean

无

150

tabindex

Dropdown组件的tabindex

boolean

无

0

disabled

是否禁用

boolean

无

false

1.3. Dropdown Slots

Name

说明

—

触发下拉列表显示的元素。 注意: 必须是一个元素或者或者组件

dropdown

下拉列表, 通常是<el-dropdown-menu>组件

1.4. Dropdown Events

事件名称

说明

回调参数

click

split-button为true时, 点击左侧按钮的回调

无

command

点击菜单项触发的事件回调

dropdown-item的指令

visible-change

下拉框出现/隐藏时触发

出现则为true, 隐藏则为false

1.5. Dropdown Menu Item Attributes

参数

说明

类型

默认值

command

指令

string/number/object

无

disabled

禁用

boolean

false

divided

显示分割线

boolean

false

icon

图标类名

string

无

2. Dropdown下拉菜单例子

2.1. 使用脚手架新建一个名为element-ui-dropdown的前端项目, 同时安装Element插件。

037_Dropdown下拉菜单

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dropdown from '../components/Dropdown.vue'
import ButtonDropdown from '../components/ButtonDropdown.vue'
import ClickDropdown from '../components/ClickDropdown.vue'
import HideClickDropdown from '../components/HideClickDropdown.vue'
import CommandDropdown from '../components/CommandDropdown.vue'
import SizeDropdown from '../components/SizeDropdown.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Dropdown' },
  { path: '/Dropdown', component: Dropdown },
  { path: '/ButtonDropdown', component: ButtonDropdown },
  { path: '/ClickDropdown', component: ClickDropdown },
  { path: '/HideClickDropdown', component: HideClickDropdown },
  { path: '/CommandDropdown', component: CommandDropdown },
  { path: '/SizeDropdown', component: SizeDropdown }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Dropdown.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown来设置下拉菜单。默认情况下, 下拉按钮只要hover即可, 无需点击也会显示下拉菜单。</h4>
    <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>
  </div>
</template>

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

2.4. 在components下创建ButtonDropdown.vue

<template>
  <div>
    <h1>触发对象-可使用按钮触发下拉菜单</h1>
    <h4>设置split-button属性来让触发下拉元素呈现为按钮组, 左边是功能按钮, 右边是触发下拉菜单的按钮, 设置为true即可。</h4>
    <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>
  </div>
</template>

<style scoped>
  .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>

2.5. 在components下创建ClickDropdown.vue

<template>
  <div>
    <h1>触发方式</h1>
    <h4>可以配置click激活或者hover激活。在trigger属性设置为click即可。</h4>
    <el-row>
      <el-col :span="4">
        <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="4">
        <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>
  </div>
</template>

<style scoped>
  .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>

2.6. 在components下创建HideClickDropdown.vue

<template>
  <div>
    <h1>菜单隐藏方式</h1>
    <h4>下拉菜单默认在点击菜单项后会被隐藏, 将hide-on-click属性默认为false可以关闭此功能。</h4>
    <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>
  </div>
</template>

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

2.7. 在components下创建CommandDropdown.vue

<template>
  <div>
    <h1>指令事件</h1>
    <h4>点击菜单项后会触发事件, 用户可以通过相应的菜单项key进行不同的操作。</h4>
    <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>
  </div>
</template>

<style scoped>
  .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>

2.8. 在components下创建SizeDropdown.vue

<template>
  <div>
    <h1>不同尺寸</h1>
    <h4>Dropdown组件提供除了默认值以外的三种尺寸, 可以在不同场景下选择合适的尺寸。额外的尺寸: medium、small、mini, 通过设置size属性来配置它们。</h4>
    <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>
  </div>
</template>

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

2.9. 运行项目, 访问http://localhost:8080/#/Dropdown

037_Dropdown下拉菜单

2.10. 运行项目, 访问http://localhost:8080/#/ButtonDropdown

037_Dropdown下拉菜单

2.11. 运行项目, 访问http://localhost:8080/#/ClickDropdown

037_Dropdown下拉菜单

2.12. 运行项目, 访问http://localhost:8080/#/HideClickDropdown

037_Dropdown下拉菜单

2.13. 运行项目, 访问http://localhost:8080/#/CommandDropdown

037_Dropdown下拉菜单

2.14. 运行项目, 访问http://localhost:8080/#/SizeDropdown

037_Dropdown下拉菜单

上一篇：elementui element-ui.common.js?5c96:2353 Uncaught TypeError: Cannot read property ‘disabled‘ of nul


下一篇：html+css练习（二）下拉菜单