refactor(layouts): layout/header 反转色样式补充

This commit is contained in:
元家怿
2022-04-29 15:53:12 +08:00
parent 401f0c748d
commit 01d0bcbfd0
9 changed files with 30 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<template>
<div class="flex-center text-18px hover:text-primary cursor-pointer" @click="handleSwitch">
<div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
<icon-mdi-moon-waning-crescent v-if="darkMode" />
<icon-mdi-white-balance-sunny v-else />
</div>

View File

@ -2,14 +2,14 @@
<div v-if="showTooltip">
<n-tooltip :placement="placement" trigger="hover">
<template #trigger>
<div class="flex-center h-full cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
<div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
<slot></slot>
</div>
</template>
{{ tooltipContent }}
</n-tooltip>
</div>
<div v-else class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]" :class="contentClass">
<div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="computedClass">
<slot></slot>
</div>
</template>
@ -25,13 +25,20 @@ interface Props {
placement?: FollowerPlacement;
/** class类 */
contentClass?: string;
/** 反转模式下 */
inverted?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
tooltipContent: '',
placement: 'bottom',
contentClass: ''
contentClass: '',
inverted: false
});
const showTooltip = computed(() => Boolean(props.tooltipContent));
const computedClass = computed(() =>
[props.contentClass, props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'].join(' ')
);
</script>
<style scoped></style>