From a66096999203105287ee998e30aaa98b51537d2b Mon Sep 17 00:00:00 2001 From: ElsaOOo Date: Wed, 10 Nov 2021 09:23:55 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90tabs=E3=80=91=E9=80=89=E9=A1=B9?= =?UTF-8?q?=E5=8D=A1=E5=88=87=E6=8D=A2=E4=B8=8D=E7=94=9F=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/tabs/src/tab.tsx | 20 ++-- packages/devui-vue/devui/tabs/src/tabs.tsx | 106 +++++++++------------ 2 files changed, 56 insertions(+), 70 deletions(-) diff --git a/packages/devui-vue/devui/tabs/src/tab.tsx b/packages/devui-vue/devui/tabs/src/tab.tsx index c7c263f4..bb03cc35 100644 --- a/packages/devui-vue/devui/tabs/src/tab.tsx +++ b/packages/devui-vue/devui/tabs/src/tab.tsx @@ -1,5 +1,5 @@ -import { defineComponent, inject } from 'vue'; -import { Tabs } from './tabs'; +import { defineComponent, inject } from 'vue' +import { Tabs } from './tabs' export default defineComponent({ name: 'DTab', @@ -18,11 +18,11 @@ export default defineComponent({ } }, setup(props, { slots }) { - const tabs = inject('tabs'); - tabs.state.slots.push(slots.dTabTitle); - tabs.state.data.push(props); + const tabs = inject('tabs') + tabs.state.slots.push(slots.dTabTitle) + tabs.state.data.push(props) return () => { - const { id } = props; + const { id } = props const content = tabs.state.showContent && tabs.state.active === id ? (
@@ -30,8 +30,8 @@ export default defineComponent({ {slots.default()}
- ) : null; - return content; - }; + ) : null + return content + } } -}); +}) diff --git a/packages/devui-vue/devui/tabs/src/tabs.tsx b/packages/devui-vue/devui/tabs/src/tabs.tsx index 2c84e1fa..ef50017f 100644 --- a/packages/devui-vue/devui/tabs/src/tabs.tsx +++ b/packages/devui-vue/devui/tabs/src/tabs.tsx @@ -8,18 +8,18 @@ import { reactive, ref, Slot -} from 'vue'; -import './tabs.scss'; +} from 'vue' +import './tabs.scss' -export type Active = string | number | null; -export type TabsType = 'tabs' | 'pills' | 'options' | 'wrapped' | 'slider'; +export type Active = string | number | null +export type TabsType = 'tabs' | 'pills' | 'options' | 'wrapped' | 'slider' export interface Tabs { state: TabsState } interface TabsState { data?: any[] showContent: boolean - active: any + active: string slots: Slot[] } export default defineComponent({ @@ -62,83 +62,77 @@ export default defineComponent({ emits: ['update:modelValue', 'activeTabChange'], setup(props, { emit, slots }) { - const tabsEle = ref(null); - const data = reactive({ offsetLeft: 0, offsetWidth: 0, id: null }); + const tabsEle = ref(null) + const data = reactive({ offsetLeft: 0, offsetWidth: 0, id: null }) const state: TabsState = reactive({ data: [], active: props.modelValue, showContent: props.showContent, slots: [] - }); + }) provide('tabs', { state - }); + }) const canChange = function (currentTab: Active) { - let changeResult = Promise.resolve(true); + let changeResult = Promise.resolve(true) if (typeof props.beforeChange === 'function') { - const result: any = props.beforeChange(currentTab); + const result: any = props.beforeChange(currentTab) if (typeof result !== 'undefined') { if (result.then) { - changeResult = result; + changeResult = result } else { - console.log(result); - changeResult = Promise.resolve(result); + console.log(result) + changeResult = Promise.resolve(result) } } } - return changeResult; - }; + return changeResult + } const activeClick = function (item, tabEl?) { if (!props.reactivable && props.modelValue === item.id) { - return; + return } canChange(item.id).then((change) => { if (!change) { - return; + return } - const tab = state.data.find((itemOption) => itemOption.id === item.id); + const tab = state.data.find((itemOption) => itemOption.id === item.id) if (tab && !tab.disabled) { - emit('update:modelValue', tab.id); + state.active = item.id + emit('update:modelValue', tab.id) if (props.type === 'slider' && tabEl && tabsEle) { this.offsetLeft = tabEl.getBoundingClientRect().left - - this.tabsEle.nativeElement.getBoundingClientRect().left; - this.offsetWidth = tabEl.getBoundingClientRect().width; + this.tabsEle.nativeElement.getBoundingClientRect().left + this.offsetWidth = tabEl.getBoundingClientRect().width } - emit('activeTabChange', tab.id); + emit('activeTabChange', tab.id) } - }); - }; - const ulClass: string[] = [props.type]; - props.cssClass && ulClass.push(props.cssClass); - props.vertical && ulClass.push('devui-nav-stacked'); + }) + } + const ulClass: string[] = [props.type] + props.cssClass && ulClass.push(props.cssClass) + props.vertical && ulClass.push('devui-nav-stacked') onUpdated(() => { if (props.type === 'slider') { // 延时等待active样式切换至正确的tab setTimeout(() => { - const tabEle = tabsEle.value.querySelector( - '#' + props.modelValue + '.active' - ); + const tabEle = tabsEle.value.querySelector('#' + props.modelValue + '.active') if (tabEle) { data.offsetLeft = - tabEle.getBoundingClientRect().left - - tabsEle.value.getBoundingClientRect().left; - data.offsetWidth = tabEle.getBoundingClientRect().width; + tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left + data.offsetWidth = tabEle.getBoundingClientRect().width } - }); + }) } - }); + }) onBeforeMount(() => { - if ( - props.type !== 'slider' && - props.modelValue === undefined && - state.data.length > 0 - ) { - activeClick(state.data[0]); + if (props.type !== 'slider' && props.modelValue === undefined && state.data.length > 0) { + activeClick(state.data[0]) } - }); + }) onMounted(() => { if ( props.type === 'slider' && @@ -146,11 +140,9 @@ export default defineComponent({ state.data.length > 0 && state.data[0] ) { - activeClick( - state.data[0].tabsEle.value.getElementById(state.data[0].tabId) - ); + activeClick(state.data[0].tabsEle.value.getElementById(state.data[0].tabId)) } - }); + }) return () => { return (
@@ -165,12 +157,10 @@ export default defineComponent({
  • { - activeClick(item); + activeClick(item) }} class={ - (props.modelValue === (item.id || item.tabId) - ? 'active' - : '') + + (props.modelValue === (item.id || item.tabId) ? 'active' : '') + ' ' + (item.disabled ? 'disabled' : '') } @@ -181,14 +171,10 @@ export default defineComponent({ data-toggle={item.id} aria-expanded={props.modelValue === (item.id || item.tabId)} > - {state.slots[i] ? ( - state.slots[i]() - ) : ( - {item.title} - )} + {state.slots[i] ? state.slots[i]() : {item.title}}
    • - ); + ) })}
    {slots.default()}
    - ); - }; + ) + } } -}); +}) -- Gitee