twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into gitee

Browse Source
This commit is contained in:
xiaoxian521 2024-01-02 23:16:18 +08:00
commit 4dc7ccda4f
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/layout/components/sidebar/leftCollapse.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import MenuFold from "@iconify-icons/ri/menu-fold-fill"; import MenuFold from "@iconify-icons/ri/menu-fold-fill";
@ -22,14 +23,14 @@ const iconClass = computed(() => {
"h-[16px]", "h-[16px]",
"inline-block", "inline-block",
"align-middle", "align-middle",
"text-primary",
"cursor-pointer", "cursor-pointer",
"duration-[100ms]", "duration-[100ms]"
"hover:text-primary",
"dark:hover:!text-white"
]; ];
}); });
const { $storage } = useGlobal<GlobalPropertiesApi>();
const themeColor = computed(() => $storage.layout?.themeColor);
const emit = defineEmits<{ const emit = defineEmits<{
(e: "toggleClick"): void; (e: "toggleClick"): void;
}>(); }>();
@ -40,7 +41,7 @@ const toggleClick = () => {
</script> </script>
<template> <template>
<div class="container"> <div class="collapse-container">
<el-tooltip <el-tooltip
placement="right" placement="right"
:visible="visible" :visible="visible"
@ -49,7 +50,7 @@ const toggleClick = () => {
> >
<IconifyIconOffline <IconifyIconOffline
:icon="MenuFold" :icon="MenuFold"
:class="iconClass" :class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }" :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
@click="toggleClick" @click="toggleClick"
@mouseenter="visible = true" @mouseenter="visible = true"
@ -60,7 +61,7 @@ const toggleClick = () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .collapse-container {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;