【功能完善】TabBar 角标完善

sheep/components/s-tabbar/s-tabbar.vue

@@ -15,6 +15,9 @@
         :key="item.text"
         :text="item.text"
         :name="item.url"
+        :badge="item.badge"
+        :dot="item.dot"
+        :badgeStyle="tabbar.badgeStyle"
         :isCenter="getTabbarCenter(index)"
         :centerImage="sheep.$url.cdn(item.iconUrl)"
         @tap="sheep.$router.go(item.url)"
@@ -33,6 +36,7 @@
 <script setup>
   import { computed, unref } from 'vue';
   import sheep from '@/sheep';
+  import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
 
   const tabbar = computed(() => {
     return sheep.$store('app').template.basic?.tabbar;

sheep/store/app.js

@@ -128,6 +128,14 @@ const adaptTemplate = async (appTemplate, templateId) => {
   const tabBar = diyTemplate?.property?.tabBar;
   if (tabBar) {
     appTemplate.basic.tabbar = tabBar;
+    // TODO 商城装修没有对 tabBar 进行角标配置，测试角标需打开以下注释
+    // appTemplate.basic.tabbar.items.forEach((tabBar) => {
+    //   tabBar.dot = false
+    //   tabBar.badge = 100
+    // })
+    // appTemplate.basic.tabbar.badgeStyle = {
+    //   backgroundColor: '#882222',
+    // }
     if (tabBar?.theme) {
       appTemplate.basic.theme = tabBar?.theme;
     }

sheep/ui/su-tabbar-item/su-tabbar-item.vue

@@ -6,24 +6,24 @@
     </view>
     <template v-else>
       <view class="u-tabbar-item__icon">
-        <image
+        <uni-badge
-          v-if="icon"
+          absolute="rightTop"
-          :name="icon"
+          size="small"
-          :color="isActive ? parentData.activeColor : parentData.inactiveColor"
+          :text="badge || (dot ? 1 : null)"
-          :size="20"
+          :customStyle="badgeStyle"
-        ></image>
+          :isDot="dot"
-        <block v-else>
+        >
-          <slot v-if="isActive" name="active-icon" />
+          <image
-          <slot v-else name="inactive-icon" />
+            v-if="icon"
-        </block>
+            :name="icon"
-        <!-- <u-badge
+            :color="isActive ? parentData.activeColor : parentData.inactiveColor"
-					absolute
+            :size="20"
-					:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
+          ></image>
-					:customStyle="badgeStyle"
+          <block v-else>
-					:isDot="dot"
+            <slot v-if="isActive" name="active-icon" />
-					:value="badge || (dot ? 1 : null)"
+            <slot v-else name="inactive-icon" />
-					:show="dot || badge > 0"
+          </block>
-				></u-badge> -->
+        </uni-badge>
       </view>
 
       <slot name="text">
@@ -44,16 +44,17 @@
   /**
    * TabbarItem 底部导航栏子组件
    * @description 此组件提供了自定义tabbar的能力。
-   * @property {String | Number}	name		item标签的名称，作为与u-tabbar的value参数匹配的标识符
+   * @property {String | Number}  name    item标签的名称，作为与u-tabbar的value参数匹配的标识符
-   * @property {String}			icon		uView内置图标或者绝对路径的图片
+   * @property {String}      icon    uView内置图标或者绝对路径的图片
-   * @property {String | Number}	badge		右上角的角标提示信息
+   * @property {String | Number}  badge    右上角的角标提示信息
-   * @property {Boolean}			dot			是否显示圆点，将会覆盖badge参数（默认 false ）
+   * @property {Boolean}      dot      是否显示圆点，将会覆盖badge参数（默认 false ）
-   * @property {String}			text		描述文本
+   * @property {String}      text    描述文本
-   * @property {Object | String}	badgeStyle	控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
+   * @property {Object | String}  badgeStyle  控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
-   * @property {Object}			customStyle	定义需要用到的外部样式
+   * @property {Object}      customStyle  定义需要用到的外部样式
    *
    */
-  import { deepMerge, addStyle, sleep, $parent } from '@/sheep/helper';
+  import { $parent, addStyle } from '@/sheep/helper';
+
   export default {
     name: 'su-tabbar-item',
     props: {
@@ -102,8 +103,8 @@
       },
       // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
       badgeStyle: {
-        type: [Object, String],
+        type: Object,
-        default: '',
+        default: ()=>{},
       },
       isCenter: {
         type: Boolean,
@@ -202,6 +203,7 @@
       height: 25px;
     }
   }
+
   .u-tabbar-item {
     display: flex;
     flex-direction: column;
@@ -230,5 +232,6 @@
   :host {
     flex: 1;
   }
+
   /* #endif */
 </style>

uni_modules/uni-badge/changelog.md

@@ -1,3 +1,7 @@
+## 1.2.2（2023-01-28）
+- 修复 运行/打包 控制台警告问题
+## 1.2.1（2022-09-05）
+- 修复 当 text 超过 max-num 时，badge 的宽度计算是根据 text 的长度计算，更改为 css 计算实际展示宽度，详见:[https://ask.dcloud.net.cn/question/150473](https://ask.dcloud.net.cn/question/150473)
 ## 1.2.0（2021-11-19）
 - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
 - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-badge](https://uniapp.dcloud.io/component/uniui/uni-badge)

uni_modules/uni-badge/components/uni-badge/uni-badge.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="uni-badge--x">
 		<slot />
-		<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
+		<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
 			class="uni-badge" @click="onClick()">{{displayValue}}</text>
 	</view>
 </template>
@@ -130,16 +130,13 @@
 				const match = whiteList[this.absolute]
 				return match ? match : whiteList['rightTop']
 			},
-			badgeWidth() {
-				return {
-					width: `${this.width}px`
-				}
-			},
 			dotStyle() {
 				if (!this.isDot) return {}
 				return {
 					width: '10px',
+					minWidth: '0',
 					height: '10px',
+					padding: '0',
 					borderRadius: '10px'
 				}
 			},
@@ -160,7 +157,7 @@
 	};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" >
 	$uni-primary: #2979ff !default;
 	$uni-success: #4cd964 !default;
 	$uni-warning: #f0ad4e !default;
@@ -195,10 +192,13 @@
 		display: flex;
 		overflow: hidden;
 		box-sizing: border-box;
+		font-feature-settings: "tnum";
+		min-width: 20px;
 		/* #endif */
 		justify-content: center;
 		flex-direction: row;
 		height: 20px;
+		padding: 0 4px;
 		line-height: 18px;
 		color: #fff;
 		border-radius: 100px;

uni_modules/uni-badge/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-badge",
   "displayName": "uni-badge 数字角标",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
   "keywords": [
     "",
@@ -18,11 +18,7 @@
   "directories": {
     "example": "../../temps/example_temps"
   },
-  "dcloudext": {
+"dcloudext": {
-    "category": [
-      "前端组件",
-      "通用组件"
-    ],
     "sale": {
       "regular": {
         "price": "0.00"
@@ -39,10 +35,11 @@
       "data": "无",
       "permissions": "无"
     },
-    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
   },
   "uni_modules": {
-    "dependencies": [],
+    "dependencies": ["uni-scss"],
     "encrypt": [],
     "platforms": {
       "cloud": {