feat(h5): tabBar set midButton

src/platforms/h5/components/app/tabBar.vue

@@ -40,16 +40,16 @@
             :class="{'uni-tabbar__icon__diff':!item.text}"
             class="uni-tabbar__icon"
             :style="{width: iconWidth,height:iconWidth}"
-          >
-            <div
-              v-if="item.iconfont"
-              :style="{
-                color:selectedIndex === index ? item.iconfont.selectedColor : item.iconfont.color,
-                fontSize: item.iconfont.fontSize || iconWidth
-              }"
-              class="uni-tabbar__iconfont"
-            >
-              {{ selectedIndex === index ? item.iconfont.selectedText : item.iconfont.text }}
+          >
+            <div
+              v-if="item.iconfont"
+              :style="{
+                color:selectedIndex === index ? item.iconfont.selectedColor : item.iconfont.color,
+                fontSize: item.iconfont.fontSize || iconWidth
+              }"
+              class="uni-tabbar__iconfont"
+            >
+              {{ selectedIndex === index ? item.iconfont.selectedText : item.iconfont.text }}
             </div>
             <img
               v-else-if="!item.isMidButton"
@@ -169,10 +169,10 @@
   uni-tabbar .uni-tabbar__icon img {
     width: 100%;
     height: 100%;
-  }
-
-  uni-tabbar .uni-tabbar__iconfont {
-    font-family: 'UniTabbarIconFont';
+  }
+
+  uni-tabbar .uni-tabbar__iconfont {
+    font-family: 'UniTabbarIconFont';
   }
 
   uni-tabbar .uni-tabbar__label {
@@ -226,11 +226,11 @@
 <script>
 import getRealPath from 'uni-platform/helpers/get-real-path'
 import { isPlainObject } from 'uni-shared'
-import { publish } from 'uni-platform/service/bridge'
+import { publish } from 'uni-platform/service/bridge'
 import { loadFontFace } from 'uni-core/view/bridge/subscribe/font'
 function cssSupports (css) {
   return window.CSS && CSS.supports && (CSS.supports(css) || CSS.supports.apply(CSS, css.split(':')))
-}
+}
 const UNI_TABBAR_ICON_FONT = 'UniTabbarIconFont'
 export default {
   name: 'TabBar',
@@ -256,10 +256,10 @@ export default {
     borderStyle: {
       type: String,
       default: 'black'
-    },
-    iconfontSrc: {
-      type: String,
-      default: ''
+    },
+    iconfontSrc: {
+      type: String,
+      default: ''
     },
     list: {
       type: Array,
@@ -301,7 +301,8 @@ export default {
   data () {
     return {
       selectedIndex: 0,
-      visibleList: []
+      visibleList: [],
+      internalMidButton: {}
     }
   },
   computed: {
@@ -345,6 +346,9 @@ export default {
         this._initVisibleList()
         this.setSelectedIndex()
       }
+    },
+    midButton (config) {
+      this._initVisibleList()
     }
   },
   created () {
@@ -352,15 +356,15 @@ export default {
       if (item.visible === undefined) {
         this.$set(item, 'visible', true)
       }
-    })
-
-    if (this.iconfontSrc) {
-      loadFontFace({
-        options: {
-          family: UNI_TABBAR_ICON_FONT,
-          source: `url("${this.iconfontSrc}")`
-        }
-      })
+    })
+
+    if (this.iconfontSrc) {
+      loadFontFace({
+        options: {
+          family: UNI_TABBAR_ICON_FONT,
+          source: `url("${this.iconfontSrc}")`
+        }
+      })
     }
   },
   beforeCreate () {
@@ -422,16 +426,16 @@ export default {
       const listLength = list.length
       // 偶数则添加midButton
       if (listLength % 2 === 0 && isPlainObject(this.midButton)) {
-        // 给midButton赋值默认值
-        const DefaultMidButton = {
-          width: '50px',
-          height: '50px',
-          iconWidth: '24px'
-        }
-        for (const key in DefaultMidButton) {
-          this.midButton[key] = this.midButton[key] || DefaultMidButton[key]
-        }
-        list.splice(~~(listLength / 2), 0, Object.assign({}, this.midButton, { isMidButton: true }))
+        this.internalMidButton = Object.assign(
+          {
+            width: '50px',
+            height: '50px',
+            iconWidth: '24px'
+          },
+          this.internalMidButton,
+          this.midButton
+        )
+        list.splice(~~(listLength / 2), 0, Object.assign({}, this.internalMidButton, { isMidButton: true }))
       }
       return list
     },

src/platforms/h5/service/api/ui/tab-bar.js

@@ -4,7 +4,7 @@ import {
 
 const setTabBarItemProps = ['text', 'iconPath', 'iconfont', 'selectedIconPath', 'visible']
 
-const setTabBarStyleProps = ['color', 'selectedColor', 'backgroundColor', 'borderStyle']
+const setTabBarStyleProps = ['color', 'selectedColor', 'backgroundColor', 'borderStyle', 'midButton']
 
 const setTabBarBadgeProps = ['badge', 'redDot']
 
@@ -45,10 +45,10 @@ function setTabBar (type, args = {}) {
       case 'hideTabBar':
         app.$children[0].hideTabBar = true
         break
-      case 'setTabBarItem': {
-        if (args.iconfont) {
-          setProperties(tabBar.list[index].iconfont, setTabBarIconfontStyles, args.iconfont)
-          args.iconfont = tabBar.list[index].iconfont
+      case 'setTabBarItem': {
+        if (args.iconfont) {
+          setProperties(tabBar.list[index].iconfont, setTabBarIconfontStyles, args.iconfont)
+          args.iconfont = tabBar.list[index].iconfont
         }
         setProperties(tabBar.list[index], setTabBarItemProps, args)
         const pagePath = args.pagePath