Vue page mobile terminal adaptation uses hamburger button vue-tasty-burgers

1. Install vue-tasty-burgers

yarn add vue-tasty-burgers

2.main.js configuration

import * as TastyBurgerButton from 'vue-tasty-burgers';
Vue.use(TastyBurgerButton);

3. Page usage

<template>
    <tasty-burger-button
        :type="buttonType"
        :active="isActive"
        :size="size"
        :color="color"
        :active-color="activeColor"
        v-on:toggle="onToggle" />
</template>

<script>
export default {
    
    
  data () {
    
    
    return {
    
    
      buttonType: 'elastic',
      isActive: false,
      size: 'xl',
      color: 'green',
      activeColor: 'orange'
    }
  },
  methods: {
    
    
    onToggle (active) {
    
    
      // Toggle menu
    }
  }
}
</script>

4. Related attributes and methods

5. Official website address

https://imfaber.github.io/vue-tasty-burgers/dist/#/index