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"
-  >
-    <div
-      :style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
-      class="uni-tabbar"
-    >
-      <div
-        v-for="(item,index) in tabBarOptions.list"
-        :key="item.pagePath"
-        class="uni-tabbar__item"
-        @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"
-          >
-            <img :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)">
-            <div
-              v-if="item.redDot"
-              :class="{'uni-tabbar__badge':!!item.badge}"
-              class="uni-tabbar__reddot"
-            >
-              {{ item.badge }}
-            </div>
-          </div>
-          <div
-            v-if="item.text"
-            :style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.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}"
-              class="uni-tabbar__reddot"
-            >
-              {{ item.badge }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </uni-tabbar>
-</template>
-
-<script>
-import getRealPath from 'uni-platform/helpers/get-real-path'
-import {
-  tabBar
-} from './observable'
-export default {
-  name: 'CustomTabBar',
-  props: {
-    selected: {
-      type: Number,
-      default: 0
-    },
-    showIcon: {
-      type: Boolean,
-      default: true
-    },
-    direction: {
-      type: String,
-      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)
-        if (index > -1) {
-          this.selectedIndex = 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 = '/'
-      }
-      const detail = {
-        index,
-        text,
-        pagePath
-      }
-      this.$emit('onTabItemTap', detail)
-      if (this.$route.path === url) {
-        UniServiceJSBridge.emit('onTabItemTap', detail)
-      }
-    }
-  }
-}
-</script>
-
-<style>
-</style>
+<template>
+  <uni-tabbar v-if="hasTabBar" v-show="showTabBar">
+    <div
+      :style="{
+        'flex-direction': direction === 'vertical' ? 'column' : 'row',
+        backgroundColor: tabBar.backgroundColor,
+      }"
+      class="uni-tabbar"
+    >
+      <div
+        v-for="(item, index) in tabBar.list"
+        :key="item.pagePath"
+        class="uni-tabbar__item"
+        @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"
+          >
+            <img
+              :src="
+                getRealPath(
+                  selectedIndex === index
+                    ? item.selectedIconPath
+                    : item.iconPath
+                )
+              "
+            />
+            <div
+              v-if="item.redDot"
+              :class="{ 'uni-tabbar__badge': !!item.badge }"
+              class="uni-tabbar__reddot"
+            >
+              {{ item.badge }}
+            </div>
+          </div>
+          <div
+            v-if="item.text"
+            :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 }"
+              class="uni-tabbar__reddot"
+            >
+              {{ item.badge }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </uni-tabbar>
+</template>
+
+<script>
+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: {
+    selected: {
+      type: Number,
+      default: 0
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    }
+  },
+  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) {
+          selectedIndex.value = index
+        }
+      }
+    })
+    function switchTab(item, index) {
+      selectedIndex.value = index
+      const detail = {
+        index,
+        text: item.text,
+        pagePath: item.pagePath,
+      }
+      emit('onTabItemTap', detail)
+    }
+
+    return {
+      tabBar,
+      getRealPath,
+      selectedIndex,
+      hasTabBar,
+      showTabBar: true,
+      switchTab,
+    }
+  }
+}
+</script>
+
+<style>
+</style>

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'