Element-Ui组件（三十六）Dropdown 下拉菜单

Element-Ui组件（三十六）Dropdown 下拉菜单

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/dropdown

基础用法

普通下拉菜单

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

带指令事件的下拉菜单

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

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

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 时有效）	number	—	250
hide-timeout	收起下拉菜单的延时（仅在 trigger 为 hover 时有效	）	number	—

Dropdown Events

事件名称	说明	回调参数
click	split-button 为 true 时，点击左侧按钮的回调	—
command	点击菜单项触发的事件回调	dropdown-item 的指令
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false

Dropdown Menu Item Attributes

参数	说明	类型	可选值	默认值
command	指令	string/number/object	—	—
disabled	禁用	boolean	—	false
divided	显示分割线	boolean	—	false