Dropdown 下拉菜单

基础用法

<template>
  <plv-dropdown>
    <plv-button>触发按钮</plv-button>
    <plv-dropdown-menu slot="dropdown">
      <plv-dropdown-item>选项一</plv-dropdown-item>
      <plv-dropdown-item>选项二</plv-dropdown-item>
      <plv-dropdown-item>选项三</plv-dropdown-item>
      <plv-dropdown-item>选项四</plv-dropdown-item>
    </plv-dropdown-menu>
  </plv-dropdown>
</template>

显示代码

禁用 & 分割线

<template>
  <plv-dropdown>
    <plv-button>触发按钮</plv-button>
    <plv-dropdown-menu slot="dropdown">
      <plv-dropdown-item>上海</plv-dropdown-item>
      <plv-dropdown-item>北京</plv-dropdown-item>
      <plv-dropdown-item disabled>广州</plv-dropdown-item>
      <plv-dropdown-item>湖南</plv-dropdown-item>
      <plv-dropdown-item divided>取消</plv-dropdown-item>
    </plv-dropdown-menu>
  </plv-dropdown>
</template>

显示代码

指令

<template>
  <plv-dropdown @command="handleCommand">
    <plv-button>触发按钮</plv-button>
    <plv-dropdown-menu slot="dropdown">
      <plv-dropdown-item command="1">选项一</plv-dropdown-item>
      <plv-dropdown-item command="2">选项二</plv-dropdown-item>
      <plv-dropdown-item command="3">选项三</plv-dropdown-item>
      <plv-dropdown-item command="4">选项四</plv-dropdown-item>
    </plv-dropdown-menu>
  </plv-dropdown>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(command);
    }
  }
};
</script>

显示代码

Dropdown Attributes

参数	说明	类型	可选值	默认值
trigger	触发方式	String	hover/click	hover
hide-on-click	点击选项后隐藏	Boolean	-	true
placement	出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom

Dropdown Event

事件名称	说明	回调参数
command	点击选项后的回调方法	选项的 command 参数

Dropdown Slots

插槽名称	说明
dropdown	下拉插槽，一般是 plv-dropdown-menu

DropdownItem Attributes

参数	说明	类型	可选值	默认值
command	指令	-	-	-
disabled	是否禁用	Boolean	-	false
divided	显示分割线	Boolean	-	false
label	选项文本	String	-	-