Merge pull request #1 from lingdu1234/main
fix(components): tab组件在黑暗模式下泛白的颜色问题以及chromeTab的重叠问题
This commit is contained in:
commit
82e613ea26
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
@ -4,7 +4,7 @@
|
||||
},
|
||||
"workbench.iconTheme": "material-icon-theme",
|
||||
"workbench.colorTheme": "One Dark Pro",
|
||||
"editor.fontSize": 15,
|
||||
"editor.fontSize": 22,
|
||||
"editor.tabSize": 2,
|
||||
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
|
||||
"editor.fontLigatures": true,
|
||||
@ -38,7 +38,7 @@
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"terminal.integrated.fontSize": 14,
|
||||
"terminal.integrated.fontFamily": "Fira Code",
|
||||
"terminal.integrated.fontFamily": "monospace",
|
||||
"terminal.integrated.fontWeight": 500,
|
||||
"i18n-ally.displayLanguage": "zh",
|
||||
"[html]": {
|
||||
|
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<!--删除 bg-white 黑暗模式正常-->
|
||||
<div
|
||||
class="relative flex-center h-30px pl-14px bg-white border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
|
||||
class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] rounded-2px cursor-pointer"
|
||||
:class="[
|
||||
closable ? 'pr-6px' : 'pr-14px',
|
||||
{ 'text-primary bg-primary bg-opacity-10 !border-primary': active, 'text-primary border-primary': isHover }
|
||||
|
@ -11,11 +11,12 @@
|
||||
<rect width="100%" height="100%" x="0"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<svg width="52%" height="100%">
|
||||
<!-- 修改为50%防止重叠颜色不一致 -->
|
||||
<svg width="50%" height="100%">
|
||||
<use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
|
||||
</svg>
|
||||
<g transform="scale(-1, 1)">
|
||||
<svg width="52%" height="100%" x="-100%" y="0">
|
||||
<svg width="50%" height="100%" x="-100%" y="0">
|
||||
<use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
|
||||
</svg>
|
||||
</g>
|
||||
@ -28,15 +29,15 @@ import { computed } from 'vue';
|
||||
const props = defineProps({
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#eef6ff'
|
||||
default: 'rgba(14,118,226,0.45)' // 修改原色 黑暗模式和亮色模式均可用
|
||||
},
|
||||
hoverColor: {
|
||||
type: String,
|
||||
default: '#dee1e6'
|
||||
default: 'rgba(51,99,152,0.17)'
|
||||
},
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
default: 'rgba(14,118,226,0.13)'
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
|
@ -14,12 +14,13 @@
|
||||
<div v-if="closable" class="pl-18px">
|
||||
<icon-close :is-primary="isActive" @click="handleClose" />
|
||||
</div>
|
||||
<n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
|
||||
<!-- 删除divder防止不和谐 -->
|
||||
<!-- <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NDivider } from 'naive-ui';
|
||||
// import { NDivider } from 'naive-ui';
|
||||
import { useBoolean } from '@/hooks';
|
||||
import IconClose from '../IconClose/index.vue';
|
||||
import { SvgRadiusBg } from './components';
|
||||
|
Loading…
Reference in New Issue
Block a user