feat(h5): custom-tab-bar

packages/uni-h5/src/framework/components/layout/customTabBar.vue → packages/uni-components/lib/custom-tab-bar/custom-tab-bar.vue

 <template>
-  <uni-tabbar
-    v-if="hasTabBar"
-    v-show="showTabBar"
-  >
+  <uni-tabbar v-if="hasTabBar" v-show="showTabBar">
     <div
-      :style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
+      :style="{
+        'flex-direction': direction === 'vertical' ? 'column' : 'row',
+        backgroundColor: tabBar.backgroundColor,
+      }"
       class="uni-tabbar"
     >
       <div
-        v-for="(item,index) in tabBarOptions.list"
+        v-for="(item, index) in tabBar.list"
         :key="item.pagePath"
         class="uni-tabbar__item"
-        @click="_switchTab(item,index)"
+        @click="switchTab(item, index)"
       >
         <div class="uni-tabbar__bd">
           <div
             v-if="showIcon && item.iconPath"
-            :class="{'uni-tabbar__icon__diff':!item.text}"
+            :class="{ 'uni-tabbar__icon__diff': !item.text }"
             class="uni-tabbar__icon"
           >
-            <img :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)">
+            <img
+              :src="
+                getRealPath(
+                  selectedIndex === index
+                    ? item.selectedIconPath
+                    : item.iconPath
+                )
+              "
+            />
             <div
               v-if="item.redDot"
-              :class="{'uni-tabbar__badge':!!item.badge}"
+              :class="{ 'uni-tabbar__badge': !!item.badge }"
               class="uni-tabbar__reddot"
             >
               {{ item.badge }}
@@ -30,13 +38,17 @@
           </div>
           <div
             v-if="item.text"
-            :style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon&&item.iconPath?'10px':'14px'}"
+            :style="{
+              color:
+                selectedIndex === index ? tabBar.selectedColor : tabBar.color,
+              fontSize: showIcon && item.iconPath ? '10px' : '14px',
+            }"
             class="uni-tabbar__label"
           >
             {{ item.text }}
             <div
-              v-if="item.redDot&&(!showIcon || !item.iconPath)"
-              :class="{'uni-tabbar__badge':!!item.badge}"
+              v-if="item.redDot && (!showIcon || !item.iconPath)"
+              :class="{ 'uni-tabbar__badge': !!item.badge }"
               class="uni-tabbar__reddot"
             >
               {{ item.badge }}
@@ -49,10 +61,11 @@
 </template>
 
 <script>
-import getRealPath from 'uni-platform/helpers/get-real-path'
-import {
-  tabBar
-} from './observable'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { getRealPath } from '@dcloudio/uni-h5'
+import { useTabBar } from '@dcloudio/uni-h5'
+
 export default {
   name: 'CustomTabBar',
   props: {
@@ -69,71 +82,41 @@ export default {
       default: 'horizontal'
     }
   },
-  data () {
-    return {
-      selectedIndex: this.selected
-    }
-  },
-  computed: {
-    tabBarOptions () {
-      return tabBar
-    },
-    hasTabBar () {
-      return tabBar.list && tabBar.list.length
-    },
-    showTabBar () {
-      const app = getApp()
-      if (app) {
-        return !app.$children[0].hideTabBar
-      }
-      return true
-    }
-  },
-  watch: {
-    selected (val) {
-      this.selectedIndex = val
-      // 同步至内置tabBar
-      const tabBar = getApp().$children[0].$refs.tabBar
-      if (tabBar) {
-        tabBar.selectedIndex = val
-      }
-    },
-    '$route' (to, from) {
-      if (to.meta.isTabBar) {
-        const index = tabBar.list.findIndex(item => to.meta.pagePath === item.pagePath)
+  setup(props, { emit }) {
+    const tabBar = useTabBar()
+    const route = useRoute()
+    const hasTabBar = computed(() => tabBar.list && tabBar.list.length)
+    const selectedIndex = ref(props.selected)
+    watch(() => props.selected, value => selectedIndex.value = value)
+    watch(() => selectedIndex.value, value => tabBar.selectedIndex = value)
+    watch(() => {
+      const meta = route.meta
+      return [meta.isTabBar, meta.route]
+    }, ([isTabBar, pagePath]) => {
+      if (isTabBar) {
+        const index = tabBar.list.findIndex(item => pagePath === item.pagePath)
         if (index > -1) {
-          this.selectedIndex = index
-        }
+          selectedIndex.value = index
         }
       }
-  },
-  methods: {
-    _getRealPath (filePath) {
-      const SCHEME_RE = /^([a-z-]+:)?\/\//i
-      const DATA_RE = /^data:.*,.*/
-      if (!(SCHEME_RE.test(filePath) || DATA_RE.test(filePath)) && filePath.indexOf('/') !== 0) {
-        filePath = '/' + filePath
-      }
-      return getRealPath(filePath)
-    },
-    _switchTab ({
-      text,
-      pagePath
-    }, index) {
-      this.selectedIndex = index
-      let url = '/' + pagePath
-      if (url === __uniRoutes[0].alias) {
-        url = '/'
-      }
+    })
+    function switchTab(item, index) {
+      selectedIndex.value = index
       const detail = {
         index,
-        text,
-        pagePath
+        text: item.text,
+        pagePath: item.pagePath,
       }
-      this.$emit('onTabItemTap', detail)
-      if (this.$route.path === url) {
-        UniServiceJSBridge.emit('onTabItemTap', detail)
+      emit('onTabItemTap', detail)
     }
+
+    return {
+      tabBar,
+      getRealPath,
+      selectedIndex,
+      hasTabBar,
+      showTabBar: true,
+      switchTab,
     }
   }
 }

packages/uni-h5/dist/uni-h5.cjs.js

@@ -11407,6 +11407,7 @@ exports.disableScrollBounce = disableScrollBounce;
 exports.getApp = getApp$1;
 exports.getContextInfo = getContextInfo;
 exports.getCurrentPages = getCurrentPages$1;
+exports.getRealPath = getRealPath;
 exports.getStorage = getStorage;
 exports.getStorageInfo = getStorageInfo;
 exports.getStorageInfoSync = getStorageInfoSync;
@@ -11431,6 +11432,7 @@ exports.useNativeEvent = useNativeEvent;
 exports.useOn = useOn;
 exports.useScroller = useScroller;
 exports.useSubscribe = useSubscribe;
+exports.useTabBar = useTabBar;
 exports.useTouchtrack = useTouchtrack;
 exports.useUserAction = useUserAction;
 exports.withWebEvent = withWebEvent;

packages/uni-h5/dist/uni-h5.es.js

@@ -20677,4 +20677,4 @@ var index = /* @__PURE__ */ defineSystemComponent({
     return openBlock(), createBlock("div", clazz, [loadingVNode]);
   }
 });
-export {$emit, $off, $on, $once, index$1 as AsyncErrorComponent, index as AsyncLoadingComponent, _sfc_main$2 as Audio, index$r as Button, index$q as Canvas, index$o as Checkbox, index$p as CheckboxGroup, index$3 as CoverImage, index$4 as CoverView, index$n as Editor, index$t as Form, Friction, index$m as Icon, index$l as Image, Input, index$s as Label, LayoutComponent, Map$1 as Map, MovableArea, MovableView, index$k as Navigator, index$2 as PageComponent, _sfc_main$1 as Picker, PickerView, PickerViewColumn, index$j as Progress, index$h as Radio, index$i as RadioGroup, ResizeSensor, index$g as RichText, ScrollView, Scroller, index$f as Slider, Spring, Swiper, SwiperItem, index$d as Switch, index$c as Text, index$b as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, index$7 as Video, index$a as View, index$6 as WebView, addInterceptor, addPhoneContact, arrayBufferToBase64, base64ToArrayBuffer, canIUse, canvasGetImageData, canvasPutImageData, canvasToTempFilePath, chooseFile, chooseImage, chooseLocation, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createAnimation, createCameraContext, createCanvasContext, createInnerAudioContext, createIntersectionObserver, createLivePlayerContext, createMapContext, createMediaQueryObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, defineBuiltInComponent, defineSystemComponent, disableScrollBounce, downloadFile, getApp$1 as getApp, getContextInfo, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLeftWindowStyle, getLocation, getNetworkType, getProvider, getRecorderManager, getRightWindowStyle, getSavedFileInfo, getSavedFileList, getScreenBrightness, getSelectedTextRange, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getTopWindowStyle, getVideoInfo, hideKeyboard, hideLeftWindow, hideLoading, hideNavigationBarLoading, hideRightWindow, hideTabBar, hideTabBarRedDot, hideToast, hideTopWindow, initScrollBounce, loadFontFace, login, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, offWindowResize, onAccelerometerChange, onCompassChange, onGyroscopeChange, onMemoryWarning, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, onUserCaptureScreen, onWindowResize, openDocument, openLocation, pageScrollTo, index$8 as plugin, preloadPage, previewImage, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeSavedFileInfo, removeStorage, removeStorageSync, removeTabBarBadge, request, saveFile, saveImageToPhotosAlbum, saveVideoToPhotosAlbum, scanCode, sendSocketMessage, setKeepScreenOn, setLeftWindowStyle, setNavigationBarColor, setNavigationBarTitle, setRightWindowStyle, setScreenBrightness, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setTopWindowStyle, setupApp, setupPage, showActionSheet, showLeftWindow, showLoading, showModal, showNavigationBarLoading, showRightWindow, showTabBar, showTabBarRedDot, showToast, showTopWindow, startAccelerometer, startCompass, startGyroscope, startPullDownRefresh, stopAccelerometer, stopCompass, stopGyroscope, stopPullDownRefresh, switchTab, uni$1 as uni, uniFormKey, uploadFile, upx2px, useAttrs, useBooleanAttr, useContextInfo, useCustomEvent, useNativeEvent, useOn, useScroller, useSubscribe, useTouchtrack, useUserAction, vibrateLong, vibrateShort, withWebEvent};
+export {$emit, $off, $on, $once, index$1 as AsyncErrorComponent, index as AsyncLoadingComponent, _sfc_main$2 as Audio, index$r as Button, index$q as Canvas, index$o as Checkbox, index$p as CheckboxGroup, index$3 as CoverImage, index$4 as CoverView, index$n as Editor, index$t as Form, Friction, index$m as Icon, index$l as Image, Input, index$s as Label, LayoutComponent, Map$1 as Map, MovableArea, MovableView, index$k as Navigator, index$2 as PageComponent, _sfc_main$1 as Picker, PickerView, PickerViewColumn, index$j as Progress, index$h as Radio, index$i as RadioGroup, ResizeSensor, index$g as RichText, ScrollView, Scroller, index$f as Slider, Spring, Swiper, SwiperItem, index$d as Switch, index$c as Text, index$b as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, index$7 as Video, index$a as View, index$6 as WebView, addInterceptor, addPhoneContact, arrayBufferToBase64, base64ToArrayBuffer, canIUse, canvasGetImageData, canvasPutImageData, canvasToTempFilePath, chooseFile, chooseImage, chooseLocation, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createAnimation, createCameraContext, createCanvasContext, createInnerAudioContext, createIntersectionObserver, createLivePlayerContext, createMapContext, createMediaQueryObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, defineBuiltInComponent, defineSystemComponent, disableScrollBounce, downloadFile, getApp$1 as getApp, getContextInfo, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLeftWindowStyle, getLocation, getNetworkType, getProvider, getRealPath, getRecorderManager, getRightWindowStyle, getSavedFileInfo, getSavedFileList, getScreenBrightness, getSelectedTextRange, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getTopWindowStyle, getVideoInfo, hideKeyboard, hideLeftWindow, hideLoading, hideNavigationBarLoading, hideRightWindow, hideTabBar, hideTabBarRedDot, hideToast, hideTopWindow, initScrollBounce, loadFontFace, login, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, offWindowResize, onAccelerometerChange, onCompassChange, onGyroscopeChange, onMemoryWarning, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, onUserCaptureScreen, onWindowResize, openDocument, openLocation, pageScrollTo, index$8 as plugin, preloadPage, previewImage, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeSavedFileInfo, removeStorage, removeStorageSync, removeTabBarBadge, request, saveFile, saveImageToPhotosAlbum, saveVideoToPhotosAlbum, scanCode, sendSocketMessage, setKeepScreenOn, setLeftWindowStyle, setNavigationBarColor, setNavigationBarTitle, setRightWindowStyle, setScreenBrightness, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setTopWindowStyle, setupApp, setupPage, showActionSheet, showLeftWindow, showLoading, showModal, showNavigationBarLoading, showRightWindow, showTabBar, showTabBarRedDot, showToast, showTopWindow, startAccelerometer, startCompass, startGyroscope, startPullDownRefresh, stopAccelerometer, stopCompass, stopGyroscope, stopPullDownRefresh, switchTab, uni$1 as uni, uniFormKey, uploadFile, upx2px, useAttrs, useBooleanAttr, useContextInfo, useCustomEvent, useNativeEvent, useOn, useScroller, useSubscribe, useTabBar, useTouchtrack, useUserAction, vibrateLong, vibrateShort, withWebEvent};

packages/uni-h5/src/index.ts

@@ -17,3 +17,5 @@ export { default as LayoutComponent } from './framework/components/layout/index'
 export { default as PageComponent } from './framework/components/page/index'
 export { default as AsyncErrorComponent } from './framework/components/async-error/index'
 export { default as AsyncLoadingComponent } from './framework/components/async-loading'
+export * from './framework/setup/state'
+export { getRealPath } from './platform'