Vue的通用下拉菜单组件 - vue-dropdown-menu

Vue的通用下拉菜单组件 - vue-dropdown-menu
插件名称 vue-dropdown-menu
发布时间 2020年9月17日
插件作者 Innologica

通用下拉菜单组件,可以附加到应用程序上的任何元素。

变更日志:

v0.1.4(10/04/2020)

  • 添加closeOnClickOutside道具

安装和下载:

# Yarn
$ yarn add @innologica/vue-dropdown-menu

# NPM
$ npm i @innologica/vue-dropdown-menu --save

如何使用它:

1.导入下拉菜单组件。

从’@ innologica / vue-dropdown-menu’导入DropdownMenu

2.将下拉菜单绑定到元素,如下所示:

<dropdown-menu
  v-model="show"
>
  <button class="dropdown-toggle">
    Click Or Hover Me
  </button>
  <div slot="dropdown">
    <a class="dropdown-item" href="#">Menu Item 1</a>
    <a class="dropdown-item" href="#">Menu Item 2</a>
    <a class="dropdown-item" href="#">Menu Item 3</a>
    ...
  </div>
</dropdown-menu>

3.默认 props 。

// 控制下拉列表的状态
value: Boolean,
// 在右边显示下拉菜单
right: Boolean,
// 悬停时显示下拉菜单
hover: Boolean,
hover_time: {
  type: Number,
  default: 100
},
hover_timeout: {
  type: Number,
  default: 500
},
// 自定义风格
styles: {
  type: Object,
  default () {
    return {}
  }
},
// 保持打开直到点击外面
interactive: { 
  type: Boolean,
  default: false,
},
// 过渡效果
transition: {
  type: String,
  default: '',
}