网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
vue-dropdown-menu是一款通用的vue.js下拉菜单组件,可以附加到应用程序上的任何元素上。
1. 导入下拉菜单组件。
import DropdownMenu from ‘@innologica/vue-dropdown-menu’
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. 默认选项。
// control the state of the dropdown
value: Boolean,
// show the dropdown menu on the right side
right: Boolean,
// display the dropdown menu on hover
hover: Boolean,
hover_time: {
type: Number,
default: 100
},
hover_timeout: {
type: Number,
default: 500
},
// custom styles
styles: {
type: Object,
default () {
return {}
}
},
// stay open until clicked outside
interactive: {
type: Boolean,
default: false,
},
// transition effect
transition: {
type: String,
default: '',
},
// close on click outside
closeOnClickOutside: {
type: Boolean,
default: true
}
转载请注明来源:通用的Vue下拉菜单组件(vue-dropdown-menu)
本文永久链接地址:https://www.moyouyouw.cn/code/1317.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论