fix: 处理报错
This commit is contained in:
@@ -38,7 +38,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ── hover 态(非激活) ──
|
// ── hover 态(非激活) ──
|
||||||
&:not(.active) {
|
&:not(.tabItemActive) {
|
||||||
&:hover {
|
&:hover {
|
||||||
// 自身分隔线消失
|
// 自身分隔线消失
|
||||||
> .divider {
|
> .divider {
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ── 激活态 ──
|
// ── 激活态 ──
|
||||||
&.active {
|
&.tabItemActive {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
// 右侧邻居的分隔线消失
|
// 右侧邻居的分隔线消失
|
||||||
& + .tabItem {
|
& + .tabItem {
|
||||||
@@ -164,7 +164,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// hover 只在非激活标签时生效
|
// hover 只在非激活标签时生效
|
||||||
.tabItem:not(.active) {
|
.tabItem:not(.tabItemActive) {
|
||||||
.tabTitleCon:hover {
|
.tabTitleCon:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.06);
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { defineComponent, type PropType } from 'vue';
|
import { defineComponent, type PropType } from 'vue';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import type { TabView } from '@/stores/tabsStore';
|
import type { TabView } from '@/types';
|
||||||
import styles from './PageTabs.module.less';
|
import styles from './PageTabs.module.less';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -12,7 +12,7 @@ import styles from './PageTabs.module.less';
|
|||||||
* - 标签间分隔线
|
* - 标签间分隔线
|
||||||
* - 关闭按钮
|
* - 关闭按钮
|
||||||
*/
|
*/
|
||||||
export default defineComponent({
|
const PageTabs = defineComponent({
|
||||||
name: 'PageTabs',
|
name: 'PageTabs',
|
||||||
props: {
|
props: {
|
||||||
/** 标签列表 */
|
/** 标签列表 */
|
||||||
@@ -49,7 +49,7 @@ export default defineComponent({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={tab.path}
|
key={tab.path}
|
||||||
class={[styles.tabItem, isActive ? styles.active : '', styles.draggable].join(' ')}
|
class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
|
||||||
onClick={() => handleClick(tab.path)}
|
onClick={() => handleClick(tab.path)}
|
||||||
>
|
>
|
||||||
{/* 分隔线:第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
|
{/* 分隔线:第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
|
||||||
@@ -59,7 +59,7 @@ export default defineComponent({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Chrome 风格背景:激活态 */}
|
{/* Chrome 风格背景:激活态 */}
|
||||||
<div class={[styles.tabBg, isActive ? styles.tabBgActive : ''].join(' ')}>
|
<div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
|
||||||
<div class={styles.tabBgInner} />
|
<div class={styles.tabBgInner} />
|
||||||
{/* 左下曲线 */}
|
{/* 左下曲线 */}
|
||||||
<svg class={styles.tabBgCurveBefore} height="7" width="7">
|
<svg class={styles.tabBgCurveBefore} height="7" width="7">
|
||||||
@@ -87,3 +87,5 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export default PageTabs;
|
||||||
|
|||||||
+2
-12
@@ -1,18 +1,8 @@
|
|||||||
import { reactive, computed, toRefs } from 'vue';
|
import { reactive, computed, toRefs } from 'vue';
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
|
import type { TabView } from '@/types';
|
||||||
|
|
||||||
/**
|
export type { TabView };
|
||||||
* 单个页面标签的数据结构(标签 = 已经访问过的页面)
|
|
||||||
*
|
|
||||||
* path 唯一标识,用于路由激活态判断
|
|
||||||
* name 路由组件 name,用于 <keep-alive :include="cachedViews">
|
|
||||||
* title 展示在 tab 上的文字
|
|
||||||
*/
|
|
||||||
export interface TabView {
|
|
||||||
path: string;
|
|
||||||
name: string;
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TabsState {
|
interface TabsState {
|
||||||
/** 已打开的页面标签列表,按访问顺序累加 */
|
/** 已打开的页面标签列表,按访问顺序累加 */
|
||||||
|
|||||||
@@ -23,6 +23,13 @@ export interface SelectOption {
|
|||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 页面标签栏单个 tab 的数据结构 */
|
||||||
|
export interface TabView {
|
||||||
|
path: string;
|
||||||
|
name: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
// ── 菜单 & 权限 ──
|
// ── 菜单 & 权限 ──
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user