Vue.js应用程序的快速动画hamburger按钮组件。

安装

此模块在NPM注册表下发布，因此您可以从任何程序包管理器进行安装。

npm install vue-burger-button --save

# Use the command bellow for Yarn.
yarn add vue-burger-button

用法

导入BurgerButton组件及其CSS。

<template>
  <burger-button
    :active="isActive"
    @click="isActive = !isActive"
  />
</template>

<script>
  import BurgerButton from 'vue-burger-button';

  export default {
    components: { BurgerButton },
    data: () => ({ isActive: false })
  };
</script>

<style src="vue-burger-button/dist/vue-burger-button.css" />

用作全局组件

如果需要<burger-button />随处可用，可以将其注册为全局组件，并且不要忘记导入其CSS。

import 'vue-burger-button/dist/vue-burger-button.css';
import Vue from 'vue';
import BurgerButton from 'vue-burger-button';

Vue.component('burger-button', BurgerButton);

CDN的用法

您可以从Unpkg导入汉堡按钮UMD模块和CSS。

<!-- 导入vue-burger-button CSS -->
<link rel="stylesheet" href="https://unpkg.com/vue-burger-button@0.1.0/dist/vue-burger-button.css" />

<!-- 导入vue-burger-button UMD bundle -->
<script src="https://unpkg.com/vue@2.5.3"></script>
<script src="https://unpkg.com/vue-burger-button@0.1.0"></script>

<script>
  /**
   * 通过VueBurgerButton可以买到VueBurgerButton。
   */
  console.dir(VueBurgerButton);

  /**
   * Vue。使用将添加汉堡按钮作为全局组件。
   */
  Vue.component('burger-button', VueBurgerButton);
</script>

Props

您可以使用Props自定义汉堡按钮。

<template>
  <burger-button
    :active="isActive"
    :bar-color="isActive ? 'red' : 'black'"
    :bar-height="15"
    :bar-width="120"
    @click="isActive = !isActive"
  />
</template>

事件

汉堡按钮会发出每个<button/>事件。所以，你可以使用@click，@mouseover等等。