mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
refactor(layouts): layout/header 反转色样式补充
This commit is contained in:
@ -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>
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user