Vue3后台管理系统（十五）Hamburger组件

分手后的思念是犯贱 2024-03-26 13:43 61阅读 0赞

**目录**

一、效果

二、组件

三、使用案例

--------------------

#### 一、效果 ####

![8a3113ac2dca4e18b7e9d157760d32bf.png][]

#### 二、组件 ####

在src/components文件夹下新建Hamburger文件夹，并在Hamburger文件夹下新建index.vue

<template>
      <div
        @click="toggleClick"
        class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px]"
      >
        <svg
          :class="{ 'is-active': isActive }"
          class="hamburger"
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
          />
        </svg>
      </div>
    </template>
    
    <script setup lang="ts">
    defineProps({
      isActive: {
        required: true,
        type: Boolean,
        default: false
      }
    });
    
    const emit = defineEmits(['toggleClick']);
    
    function toggleClick() {
      emit('toggleClick');
    }
    </script>
    
    <style scoped>
    .hamburger {
      width: 20px;
      height: 20px;
    }
    
    .hamburger.is-active {
      transform: rotate(180deg);
    }
    </style>

#### 三、使用案例 ####

<script setup lang="ts">
    import Hamburger from '@/components/Hamburger/index.vue'
    import {ref} from "vue";
    
    const is_active = ref(false);
    
    const handle_toggle = function () {
      console.log(is_active.value)
      is_active.value = !is_active.value;
    };
    
    </script>
    
    <template>
      <div>
        <hamburger @toggle-click="handle_toggle" :is-active="is_active"></hamburger>
      </div>
    </template>
    
    <style>
    
    </style>

![afa934b578024276b00d9bc41193e2e3.png][]

[8a3113ac2dca4e18b7e9d157760d32bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0b0aa902d2274dbaa92a11466193bb10.png
[afa934b578024276b00d9bc41193e2e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f8936ad84dcf40618d16190b84d4881b.png