Vue移动优先的侧边栏菜单系统组件,多种风格–vue-burger-menu

Vue移动优先的侧边栏菜单系统组件,多种风格–vue-burger-menu
插件名称 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
}