diff --git a/src/packages/__VUE/tabs/__tests__/index.spec.tsx b/src/packages/__VUE/tabs/__tests__/index.spec.tsx
index 8d6934ddfc..38fbb59a1d 100644
--- a/src/packages/__VUE/tabs/__tests__/index.spec.tsx
+++ b/src/packages/__VUE/tabs/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
import { config, mount } from '@vue/test-utils'
-import { nextTick, reactive } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
import { JoySmile, Dongdong } from '@nutui/icons-vue'
import { Sticky as NutSticky, Tabs, TabPane } from '@nutui/nutui'
@@ -15,27 +15,19 @@ afterAll(() => {
config.global.components = {}
})
-test('base Tabs', () => {
- const wrapper = mount(Tabs)
- const rate = wrapper.find('.nut-tabs')
- expect(rate.exists()).toBe(true)
-})
-
-test('base tabs props', async () => {
- const wrapper = mount(Tabs, {
- props: {
- modelValue: '0',
- background: '#f5f5f5',
- color: '#f5f5f5',
- direction: 'horizontal',
- type: 'smile',
- size: 'large',
- 'title-scroll': true
- },
- components: {
- 'nut-tabs': Tabs,
- 'nut-tab-pane': TabPane
- }
+test('Tabs: base tabs props', async () => {
+ const wrapper = mount(() => {
+ return (
+
+ )
})
await nextTick()
const stepItem = wrapper.find('.nut-tabs__titles')
@@ -50,27 +42,24 @@ test('base tabs props', async () => {
expect(_stepItem3.classes()).toContain('scrollable')
})
-test('base other props', async () => {
- const wrapper = mount({
- components: {
- 'nut-tabs': Tabs,
- 'nut-tab-pane': TabPane
- },
- template: `
-
- 123
- 456
-
- `
+test('Tabs: base other props', async () => {
+ const wrapper = mount(() => {
+ return (
+
+ 123
+ 456
+
+ )
})
await nextTick()
const stepItem = wrapper.find('.nut-tabs__content')
expect((stepItem.element as HTMLElement).style.transitionDuration).toEqual('500ms')
const stepItem1 = wrapper.find('.nut-tabs__titles-item')
- expect((stepItem1.element as HTMLElement).style.marginLeft).toEqual('20px')
+ expect((stepItem1.element as HTMLElement).style.paddingLeft).toEqual('20px')
})
-test('base Tabs Slots', async () => {
+test('Tabs: base Tabs Slots', async () => {
+ // TODO: template -> tsx
const wrapper = mount({
components: {
'nut-tabs': Tabs,
@@ -133,25 +122,24 @@ test('base Tabs Slots', async () => {
expect(tab4.exists()).toBe(true)
})
-test('base Tabpane Props', async () => {
- const wrapper = mount({
- components: {
- 'nut-tabs': Tabs,
- 'nut-tab-pane': TabPane
- },
- template: `
-
-
- Tab 2
- Tab 3
-
- `,
- setup() {
- const state = reactive({
- tab2value: '0'
- })
- return { state }
- }
+test('Tabs: base Tabpane Props', async () => {
+ const val = ref('0')
+ const wrapper = mount(() => {
+ return (
+
+
+ {' '}
+
+
+ {' '}
+ Tab 2{' '}
+
+
+ {' '}
+ Tab 3{' '}
+
+
+ )
})
await nextTick()
const tab = wrapper.findAll('.nut-tabs__titles-item')
@@ -164,25 +152,24 @@ test('base Tabpane Props', async () => {
expect(tab3[0].html()).toContain('Tab 1')
})
-test('base Tabpane disabled swipeable', async () => {
- const wrapper = mount({
- components: {
- 'nut-tabs': Tabs,
- 'nut-tab-pane': TabPane
- },
- template: `
-
-
- Tab 2
- Tab 3
-
- `,
- setup() {
- const state = reactive({
- tab2value: '0'
- })
- return { state }
- }
+test('Tabs: base Tabpane disabled swipeable', async () => {
+ const val = ref('0')
+ const wrapper = mount(() => {
+ return (
+
+
+ {' '}
+
+
+ {' '}
+ Tab 2{' '}
+
+
+ {' '}
+ Tab 3{' '}
+
+
+ )
})
await nextTick()
const tab = wrapper.findAll('.nut-tabs__titles-item')
@@ -195,25 +182,24 @@ test('base Tabpane disabled swipeable', async () => {
expect(tab3[0].html()).toContain('Tab 1')
})
-test('base click', async () => {
- const wrapper = mount({
- components: {
- 'nut-tabs': Tabs,
- 'nut-tab-pane': TabPane
- },
- template: `
-
- Tab 1
- Tab 2
- Tab 3
-
- `,
- setup() {
- const state = reactive({
- tab1value: '0'
- })
- return { state }
- }
+test('Tabs: base click', async () => {
+ const val = ref('0')
+ const wrapper = mount(() => {
+ return (
+
+
+ {' '}
+
+
+ {' '}
+ Tab 2{' '}
+
+
+ {' '}
+ Tab 3{' '}
+
+
+ )
})
await nextTick()
const tab = wrapper.find('.nut-tabs__titles-item')
@@ -223,27 +209,25 @@ test('base click', async () => {
expect((tab1.element as HTMLElement).style.transform).toEqual('translate3d(-0%, 0, 0)')
})
-test('Tabs: direction=vertical & title-gutter', async () => {
- const wrapper = mount({
- components: {
- 'nut-tabs': Tabs,
- 'nut-tab-pane': TabPane
- },
- template: `
-
- Tab 1
- Tab 2
- Tab 3
-
- `,
- setup() {
- const state = reactive({
- tab1value: '0'
- })
- return { state }
- }
+test('Tabs: Tabs: direction=vertical & title-gutter', async () => {
+ const wrapper = mount(() => {
+ return (
+
+
+ {' '}
+
+
+ {' '}
+ Tab 2{' '}
+
+
+ {' '}
+ Tab 3{' '}
+
+
+ )
})
await nextTick()
const tab = wrapper.find('.nut-tabs__titles-item')
- expect(tab.html()).includes('margin-top: 10px')
+ expect(tab.html()).includes('padding-top: 10px')
})
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
index 2dd5e48775..66487616e2 100644
--- a/src/packages/__VUE/tabs/index.taro.vue
+++ b/src/packages/__VUE/tabs/index.taro.vue
@@ -266,16 +266,14 @@ export default create({
let to = 0
if (props.direction === 'vertical') {
- const DEFAULT_PADDING = 11
const top = titleRects
.slice(0, currentIndex.value)
- .reduce((prev: number, curr: RectItem) => prev + curr?.height + 0, DEFAULT_PADDING)
+ .reduce((prev: number, curr: RectItem) => prev + curr?.height, 0)
to = top - (navRectRef.value?.height - titleRect?.height) / 2
} else {
- const DEFAULT_PADDING = 31
const left = titleRects
.slice(0, currentIndex.value)
- .reduce((prev: number, curr: RectItem) => prev + curr?.width + 20, DEFAULT_PADDING)
+ .reduce((prev: number, curr: RectItem) => prev + curr?.width, 0)
to = left - (navRectRef.value?.width - titleRect?.width) / 2
}
@@ -398,9 +396,9 @@ export default create({
if (!props.titleGutter) return {}
const px = pxCheck(props.titleGutter)
if (props.direction === 'vertical') {
- return { marginTop: px, marginBottom: px }
+ return { paddingTop: px, paddingBottom: px }
}
- return { marginLeft: px, marginRight: px }
+ return { paddingLeft: px, paddingRight: px }
})
return {
titles,
diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
index e26d4986dd..4141f8e7a1 100644
--- a/src/packages/__VUE/tabs/index.vue
+++ b/src/packages/__VUE/tabs/index.vue
@@ -398,9 +398,9 @@ export default create({
if (!props.titleGutter) return {}
const px = pxCheck(props.titleGutter)
if (props.direction === 'vertical') {
- return { marginTop: px, marginBottom: px }
+ return { paddingTop: px, paddingBottom: px }
}
- return { marginLeft: px, marginRight: px }
+ return { paddingLeft: px, paddingRight: px }
})
return {