ソースを参照

fix(tabs): web env bug

richard1015 2 年 前
コミット
ddb94d045d

+ 3 - 6
src/packages/__VUE/tabs/hooks.ts

@@ -1,17 +1,14 @@
 import { onMounted, reactive, ref } from 'vue';
 import { useTouch } from '@/packages/utils/useTouch';
-import { useTaroRect } from '@/packages/utils/useTaroRect';
-import requestAniFrame from '@/packages/utils/raf';
-import Taro from '@tarojs/taro';
 type TouchPosition = 'left' | 'right' | 'top' | 'bottom' | '';
 
-export const useTabContentTouch = (props: any, tabMethods: any) => {
+export const useTabContentTouch = (props: any, tabMethods: any, taro?: any, useTaroRect?: any) => {
   const tabsContentRef = ref<HTMLElement>();
 
   const tabsContentRefRect = ref({ width: 0, height: 0 });
   const initTaroWidth = async () => {
-    if (Taro.getEnv() !== Taro.ENV_TYPE.WEB) {
-      let rect = await useTaroRect(tabsContentRef, Taro);
+    if (taro && taro.getEnv() !== taro.ENV_TYPE.WEB) {
+      let rect = await useTaroRect(tabsContentRef, taro);
       tabsContentRefRect.value.width = rect.width || 0;
       tabsContentRefRect.value.height = rect.height || 0;
     } else {

+ 3 - 1
src/packages/__VUE/tabs/index.taro.vue

@@ -54,6 +54,8 @@ import raf from '@/packages/utils/raf';
 import Taro from '@tarojs/taro';
 import type { RectItem } from './types';
 import { useTabContentTouch } from './hooks';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
+
 export class Title {
   title: string = '';
   titleSlot?: VNode[];
@@ -316,7 +318,7 @@ export default create({
         titleRef.value[index] = el;
       }
     };
-    const { tabsContentRef, touchState, touchMethods } = useTabContentTouch(props, tabMethods);
+    const { tabsContentRef, touchState, touchMethods } = useTabContentTouch(props, tabMethods, Taro, useTaroRect);
     const contentStyle = computed(() => {
       let offsetPercent = currentIndex.value * 100;
       if (touchState.moving) {