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
}

---

官网：https://github.com/mbj36/vue-burger-menu

演示：https://www.vue365.cn/code_demo.php?id=372

GitHub下载：https://github.com/mbj36/vue-burger-menu/archive/master.zip