插件名称 | vue-burger-menu |
---|---|
发布时间 | 2020年5月1日 |
插件作者 | mbj36 |
burger-menu是针对Vue.js应用程序的移动优先的画布侧边栏菜单系统。
它带有使用CSS过渡和SVG路径动画的效果和样式的集合。
# Yarn
$ yarn add vue-burger-menu
# NPM
$ npm install vue-burger-menu --save
1.安装,导入和注册组件。
// 导入动画
import { Slide } from 'vue-burger-menu'
// 注册组件
export default {
components: {
Slide
}
}
2.将vue-burger-menu组件添加到模板。
<template>
<Slide>
<a id="home" href="#">
<span>Home</span>
</a>
</Slide>
</template>
3.可用的props。
isOpen: {
type: Boolean,
required: false
},
right: {
type: Boolean,
required: false
},
width: {
type: [String],
required: false,
default: '300'
},
disableEsc: {
type: Boolean,
required: false
},
noOverlay: {
type: Boolean,
required: false
},
onStateChange: {
type: Function,
required: false
},
burgerIcon: {
type: Boolean,
required: false,
default: true
},
crossIcon: {
type: Boolean,
required: false,
default: true
},
disableOutsideClick: {
type: Boolean,
required: false,
default: false
},
closeOnNavigation: {
type: Boolean,
required: false,
default: false
}