index.vue 679 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div
  3. class="px-[15px] flex items-center justify-center color-[var(--el-text-color-regular)]"
  4. @click="toggleClick"
  5. >
  6. <svg-icon
  7. class="hamburger"
  8. :class="{ 'is-active': isActive }"
  9. icon-class="indent-decrease"
  10. />
  11. </div>
  12. </template>
  13. <script setup lang="ts">
  14. defineProps({
  15. isActive: {
  16. required: true,
  17. type: Boolean,
  18. default: false,
  19. },
  20. });
  21. const emit = defineEmits(["toggleClick"]);
  22. function toggleClick() {
  23. emit("toggleClick");
  24. }
  25. </script>
  26. <style scoped lang="scss">
  27. .hamburger {
  28. vertical-align: middle;
  29. cursor: pointer;
  30. transform: scaleX(-1);
  31. }
  32. .hamburger.is-active {
  33. transform: scaleX(1);
  34. }
  35. </style>