通用下拉菜单组件,可以附加到应用程序上的任何元素。
# 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: '',
}