diff --git a/packages/opendesign/src/components/tabs/TabContent.vue b/packages/opendesign/src/components/tabs/TabContent.vue
deleted file mode 100644
index afaf74d0e895b217e977344b5aa8b61fc7088a2b..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/tabs/TabContent.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-
diff --git a/packages/opendesign/src/components/tabs/TabNav.vue b/packages/opendesign/src/components/tabs/TabNav.vue
deleted file mode 100644
index 7a8563dbaa15298925ca529001cec92aacd9d47f..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/components/tabs/TabNav.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
index 84fdca2595de0c11407c20d1820876c833915031..31bf2db94bc1d5d7b5cabcfa887c02d4a8db526f 100644
--- a/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
@@ -3,7 +3,8 @@ import { ref, reactive } from 'vue';
import { OTabs, OTabPane } from '../index';
import { IconSearch } from '../../icons';
const activeTab = ref('Tab A');
-const tabChange = (val: string | number, oldVal: string | number) => {
+const activeTab2 = ref('1');
+const tabChange = (val: string | number, oldVal?: string | number) => {
console.log(`active: ${val}, old: ${oldVal}`);
};
function getPanelItem(key: string) {
@@ -26,15 +27,18 @@ const tabAdd = () => {
const tabDelete = (v: string | number) => {
console.log(v);
};
+const onChange = (v: string | number, oldv?: string | number) => {
+ console.log('change', v, oldv);
+};
Variant
Solid
-
+
pane 1
pane 2
- pane 3
+ pane 3
pane 4
line:false
@@ -62,7 +66,7 @@ const tabDelete = (v: string | number) => {
Slot & change
-
+
Prefix
Suffix
Nav 1pane 1
@@ -73,7 +77,7 @@ const tabDelete = (v: string | number) => {
pane 4
center
-
+
Prefix
Suffix
Nav 1pane 1
@@ -84,9 +88,9 @@ const tabDelete = (v: string | number) => {
pane 4
Add & Delete
+ Add & Lazy
-
+
{{ item.content }}
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts
index 83d284bf1a402b3e6177d7ca9a1602ac3400c5d1..da5f3b85cd70b6b515f70c0f9fd38de6118a5f41 100644
--- a/packages/opendesign/src/components/tabs/provide.ts
+++ b/packages/opendesign/src/components/tabs/provide.ts
@@ -1,20 +1,13 @@
-import { InjectionKey, Ref, Slots, SetupContext } from 'vue';
-
-export interface TabNavData {
- value: string | number;
- label?: string;
- transition?: string,
- unmountOnHide?: boolean,
- disabled?: boolean;
- closable?: boolean;
- lazy?: boolean;
- slots?: Slots;
- attrs?: SetupContext['attrs'],
-}
+import { InjectionKey, Ref } from 'vue';
export const tabsInjectKey: InjectionKey<{
lazy: boolean,
- addTabItem: (key: string | number, data: TabNavData) => void,
+ navsRef: Ref,
+ bodyRef: Ref,
+ activeValue: Ref,
+ initValue: (value: string | number, navEl: HTMLElement | null) => void,
+ updateValue: (value: string | number, navEl: HTMLElement | null) => void,
+ onDeletePane: (value: string | number, evt: MouseEvent) => void,
}> = Symbol('provide-tabs');
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index 0e38b3ecc6be7f71b8fdf551a1471aa19c463052..0a4117078c83bc18eb2afc2e9be4921c7314d330 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -26,6 +26,10 @@
border-bottom: var(--tabs-nav-divider);
}
}
+.o-tabs-navs-wrap {
+ display: inline-flex;
+ align-items: center;
+}
.o-tab-nav {
display: inline-flex;
align-items: center;
@@ -36,9 +40,6 @@
background-color: var(--tabs-nav-bg-color);
position: relative;
z-index: 1;
- + .o-tab-nav {
- margin-left: 8px;
- }
&:hover {
color: var(--tabs-nav-color-hover);
@@ -46,7 +47,7 @@
background-color: var(--tabs-nav-bg-color-hover);
}
- &.active {
+ &.is-active {
color: var(--tabs-nav-color-active);
border-color: var(--tabs-nav-bd-color-active);
background-color: var(--tabs-nav-bg-color-active);
@@ -126,11 +127,16 @@
display: flex;
}
-.o-tab-content {
+.o-tab-pane {
flex-shrink: 0;
width: 100%;
display: none;
- &.active {
+ &.is-active {
display: block;
}
}
+.o-tabs-solid {
+ .o-tab-nav + .o-tab-nav {
+ margin-left: 8px;
+ }
+}
diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts
index b8c9f73f08798bd6104c86d1b3fe037b39517093..b3ddf43aa5a7ed5fab7091c4830cdb0caa8e6e41 100644
--- a/packages/opendesign/src/components/tabs/types.ts
+++ b/packages/opendesign/src/components/tabs/types.ts
@@ -7,7 +7,7 @@ export const tabsProps = {
*/
modelValue: {
type: [String, Number],
- default: ''
+ default: undefined
},
/**
* VariantT
@@ -61,13 +61,6 @@ export const tabPaneProps = {
type: String,
default: undefined,
},
- /**
- * 是否在隐藏时卸载页签内容
- */
- unmountOnHide: {
- type: Boolean,
- default: false,
- },
/**
* 页签切换时过渡动画
*/
@@ -90,12 +83,19 @@ export const tabPaneProps = {
default: false,
},
/**
- * 是否页签首次激活时再加载页签内容
+ * 是否页签首次激活前不渲染页签内容
*/
lazy: {
type: Boolean,
default: false,
},
+ /**
+ * 是否在隐藏时卸载页签内容
+ */
+ unmountOnHide: {
+ type: Boolean,
+ default: false,
+ },
};
export type TabPanePropsT = ExtractPropTypes;
\ No newline at end of file