@10yun/cv-mobile-ui 0.5.62 → 0.5.64

package/ui-fireui/components/u-tabbar/u-tabbar.vue

@@ -1,20 +1,33 @@
 <template>
-  <view class="up-tabbar" :class="{ 'up-tabbar-fixed': isFixed, 'up-unlined': unlined }" :style="{ background: backgroundColor }">
+  <view
+    class="up-tabbar"
+    :class="{ 'up-tabbar-fixed': isFixed, 'up-unlined': unlined, 'up-backdrop__filter': backdropFilter }"
+    :style="{ background: backgroundColor, zIndex: isFixed ? zIndex : 'auto' }"
+  >
     <block v-for="(item, index) in tabBar" :key="index">
       <view
         class="up-tabbar-item"
         :class="{ 'up-item-hump': item.hump }"
-        :style="{ backgroundColor: item.hump ? backgroundColor : 'none' }"
+        :style="{ backgroundColor: item.hump && !backdropFilter ? backgroundColor : 'none' }"
         @tap="tabbarSwitch(index, item.hump, item.pagePath, item.verify)"
       >
         <view class="up-icon-box" :class="{ 'up-tabbar-hump': item.hump }">
           <image
             :src="current == index ? item.selectedIconPath : item.iconPath"
             :class="[item.hump ? '' : 'up-tabbar-icon']"
+            v-if="!item.name"
           ></image>
+          <up-icon
+            :name="current === index ? item.activeName : item.name"
+            :customPrefix="item.customPrefix || ''"
+            :size="item.iconSize || iconSize"
+            unit="rpx"
+            :color="current == index ? getActiveColor : color"
+            v-else
+          ></up-icon>
           <view
             :class="[item.isDot ? 'up-badge-dot' : 'up-badge']"
-            :style="{ color: badgeColor, backgroundColor: badgeBgColor }"
+            :style="{ color: badgeColor, backgroundColor: getBadgeBgColor }"
             v-if="item.num"
           >
             {{ item.isDot ? '' : item.num }}
@@ -23,19 +36,28 @@
         <view
           class="up-text-scale"
           :class="{ 'up-text-hump': item.hump }"
-          :style="{ color: current == index ? selectedColor : color }"
+          :style="{ color: current == index ? getActiveColor : color }"
         >
           {{ item.text }}
         </view>
       </view>
     </block>
-    <view :class="{ 'up-hump-box': hump }" v-if="hump && !unlined"></view>
+    <view
+      :style="{ background: backgroundColor }"
+      :class="{ 'up-hump-box': hump }"
+      v-if="hump && !unlined && !backdropFilter"
+    ></view>
   </view>
 </template>
 
 <script>
+// import tuiIcon from '@/components/thorui/up-icon/up-icon.vue'
 export default {
-  name: 'fuiTabbar',
+  name: 'tuiTabbar',
+  emits: ['click'],
+  // components:{
+  // 	tuiIcon
+  // },
   props: {
     //当前索引
     current: {
@@ -50,7 +72,7 @@ export default {
     //字体选中颜色
     selectedColor: {
       type: String,
-      default: '#5677FC'
+      default: ''
     },
     //背景颜色
     backgroundColor: {
@@ -62,20 +84,15 @@ export default {
       type: Boolean,
       default: false
     },
+    iconSize: {
+      type: [Number, String],
+      default: 52
+    },
     //固定在底部
     isFixed: {
       type: Boolean,
       default: true
     },
-    //tabbar
-    // "pagePath": "/pages/my/my", 页面路径
-    // "text": "thor", 标题
-    // "iconPath": "thor_gray.png", 图标地址
-    // "selectedIconPath": "thor_active.png", 选中图标地址
-    // "hump": true, 是否为凸起图标
-    // "num": 2,   角标数量
-    // "isDot": true,  角标是否为圆点
-    // "verify": true  是否验证  （如登录）
     tabBar: {
       type: Array,
       default() {
@@ -90,22 +107,36 @@ export default {
     //角标背景颜色
     badgeBgColor: {
       type: String,
-      default: '#F74D54'
+      default: ''
     },
     unlined: {
       type: Boolean,
       default: false
+    },
+    //是否开启高斯模糊效果[仅在支持的浏览器有效果]
+    backdropFilter: {
+      type: Boolean,
+      default: false
+    },
+    //z-index
+    zIndex: {
+      type: [Number, String],
+      default: 9999
     }
   },
   data() {
     return {};
   },
-  watch: {
-    current() {}
+  computed: {
+    getActiveColor() {
+      return this.selectedColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getBadgeBgColor() {
+      return this.badgeBgColor || (uni && uni.$tui && uni.$tui.color.pink) || '#f74d54';
+    }
   },
   methods: {
     tabbarSwitch(index, hump, pagePath, verify) {
-      // console.log('current', this.current);
       this.$emit('click', {
         index: index,
         hump: hump,
@@ -127,9 +158,15 @@ export default {
   position: relative;
 }
 
+.up-backdrop__filter {
+  /* Safari for macOS & iOS */
+  -webkit-backdrop-filter: blur(15px);
+  /* Google Chrome */
+  backdrop-filter: blur(15px);
+}
+
 .up-tabbar-fixed {
   position: fixed;
-  z-index: 9;
   left: 0;
   bottom: 0;
   padding-bottom: constant(safe-area-inset-bottom);
@@ -140,8 +177,9 @@ export default {
 .up-tabbar::before {
   content: ' ';
   width: 100%;
+  border-top: 1px solid #b2b2b2;
   position: absolute;
-  top: 0;
+  top: -1rpx;
   left: 0;
   transform: scaleY(0.5) translateZ(0);
   transform-origin: 0 0;
@@ -156,8 +194,7 @@ export default {
   text-align: center;
   align-items: center;
   flex-direction: column;
-  /* justify-content: space-between; */
-  justify-content: center;
+  justify-content: space-between;
   position: relative;
   padding: 10rpx 0;
   box-sizing: border-box;
@@ -173,14 +210,14 @@ export default {
 }
 
 .up-tabbar-icon {
-  width: 44rpx;
-  height: 44rpx;
+  width: 52rpx;
+  height: 52rpx;
   display: block;
 }
 
 .up-hump-box {
-  width: 88rpx;
-  height: 78rpx;
+  width: 120rpx;
+  height: 120rpx;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -193,6 +230,7 @@ export default {
   content: ' ';
   height: 200%;
   width: 200%;
+  border: 1px solid #b2b2b2;
   position: absolute;
   top: 0;
   left: 0;
@@ -208,13 +246,13 @@ export default {
 }
 
 .up-tabbar-hump {
-  width: 80rpx;
-  height: 80rpx;
+  width: 100rpx;
+  height: 100rpx;
   position: absolute;
   left: 50%;
   -webkit-transform: translateX(-50%) rotate(0deg);
   transform: translateX(-50%) rotate(0deg);
-  /* top: -27.5rpx; */
+  top: -40rpx;
   -webkit-transition: all 0.2s linear;
   transition: all 0.2s linear;
   border-radius: 50%;
@@ -222,8 +260,8 @@ export default {
 }
 
 .up-tabbar-hump image {
-  width: 76rpx;
-  height: 76rpx;
+  width: 100rpx;
+  height: 100rpx;
   display: block;
 }
 
@@ -271,9 +309,4 @@ export default {
   right: -4rpx;
   top: -4rpx;
 }
-
-.pic_noTitle {
-  height: 60rpx;
-  width: 60rpx;
-}
 </style>

package/ui-fireui/components/u-tabs/u-tabs.vue

@@ -3,33 +3,44 @@
     class="up-tabs-view"
     :class="[isFixed ? 'up-tabs-fixed' : 'up-tabs-relative', unlined ? 'up-unlined' : '']"
     :style="{
+      width: tabsWidth + 'px',
       height: height + 'rpx',
       padding: `0 ${padding}rpx`,
       background: backgroundColor,
-      top: isFixed ? top + 'px' : 'auto'
+      top: isFixed ? top + 'px' : 'auto',
+      zIndex: isFixed ? zIndex : 'auto'
     }"
+    v-if="tabsWidth > 0"
   >
     <view
       v-for="(item, index) in tabs"
       :key="index"
       class="up-tabs-item"
-      :style="{ width: itemWidth, borderRight: index < tabs.length - 1 ? borderRight : '' }"
+      :style="{ width: getItemWidth, height: height + 'rpx' }"
       @tap.stop="swichTabs(index)"
     >
       <view
         class="up-tabs-title"
-        :class="{ 'up-tabs-active': currentTab == index, 'up-tabs-disabled': item.disabled }"
+        :class="{ 'up-tabs-disabled': item.disabled }"
         :style="{
-          color: currentTab == index ? selectedColor : color,
+          color: currentTab == index ? getSelectedColor : color,
           fontSize: size + 'rpx',
-          lineHeight: lineHeight + 'rpx',
-          fontWeight: bold && currentTab == index ? 'bold' : 'normal'
+          fontWeight: bold && currentTab == index ? 'bold' : 'normal',
+          transform: `scale(${currentTab == index ? scale : 1})`
         }"
       >
-        {{ item.name }}
+        {{ item[field] }}
+        <view
+          :class="[item.isDot ? 'up-badge__dot' : 'up-tabs__badge']"
+          :style="{ color: badgeColor, backgroundColor: getBadgeBgColor }"
+          v-if="item[badgeField] || item.isDot"
+        >
+          {{ item.isDot ? '' : item[badgeField] }}
+        </view>
       </view>
     </view>
     <view
+      v-if="isSlider"
       class="up-tabs-slider"
       :style="{
         transform: 'translateX(' + scrollLeft + 'px)',
@@ -37,7 +48,7 @@
         height: sliderHeight + 'rpx',
         borderRadius: sliderRadius,
         bottom: bottom,
-        background: sliderBgColor,
+        background: getSliderBgColor,
         marginBottom: bottom == '50%' ? '-' + sliderHeight / 2 + 'rpx' : 0
       }"
     ></view>
@@ -46,7 +57,8 @@
 
 <script>
 export default {
-  name: 'fuiTabs',
+  name: 'tuiTabs',
+  emits: ['change'],
   props: {
     //标签页
     tabs: {
@@ -55,10 +67,24 @@ export default {
         return [];
       }
     },
+    //显示文本字段名称
+    field: {
+      type: String,
+      default: 'name'
+    },
+    badgeField: {
+      type: String,
+      default: 'num'
+    },
+    //tabs宽度，不传值则默认使用windowWidth，单位px
+    width: {
+      type: [Number, String],
+      default: 0
+    },
     //rpx
     height: {
       type: Number,
-      default: 88
+      default: 80
     },
     //rpx 只对左右padding起作用，上下为0
     padding: {
@@ -78,15 +104,11 @@ export default {
     //px
     top: {
       type: Number,
-      // #ifdef APP-PLUS
-      default: 70,
+      // #ifndef H5
+      default: 0,
       // #endif
       // #ifdef H5
-      default: 44,
-      // #endif
-
-      // #ifdef MP
-      default: 54
+      default: 44
       // #endif
     },
     //是否去掉底部线条
@@ -99,6 +121,10 @@ export default {
       type: Number,
       default: 0
     },
+    isSlider: {
+      type: Boolean,
+      default: true
+    },
     //滑块宽度
     sliderWidth: {
       type: Number,
@@ -112,7 +138,7 @@ export default {
     //滑块背景颜色
     sliderBgColor: {
       type: String,
-      default: '#6468D5'
+      default: ''
     },
     sliderRadius: {
       type: String,
@@ -123,43 +149,49 @@ export default {
       type: String,
       default: '0'
     },
-    borderRight: {
-      type: String,
-      default: '0'
-    },
     //标签页宽度
     itemWidth: {
       type: String,
-      default: '25%'
+      default: ''
     },
     //字体颜色
     color: {
       type: String,
-      default: '#333333'
+      default: '#666'
     },
     //选中后字体颜色
     selectedColor: {
       type: String,
-      default: '#6468D5'
+      default: ''
     },
     //字体大小
     size: {
       type: Number,
-      default: 32
-    },
-    lineHeight: {
-      type: Number,
-      default: 32
+      default: 28
     },
     //选中后 是否加粗 ，未选中则无效
     bold: {
       type: Boolean,
       default: false
     },
-    // 滑块向左偏移位置
-    scrollRight: {
-      type: Number,
-      default: 0
+    //2.3.0+
+    scale: {
+      type: [Number, String],
+      default: 1
+    },
+    //角标字体颜色
+    badgeColor: {
+      type: String,
+      default: '#fff'
+    },
+    //角标背景颜色
+    badgeBgColor: {
+      type: String,
+      default: ''
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 996
     }
   },
   watch: {
@@ -168,32 +200,52 @@ export default {
     },
     tabs() {
       this.checkCor();
+    },
+    width(val) {
+      this.tabsWidth = val;
+      this.checkCor();
+    }
+  },
+  computed: {
+    getItemWidth() {
+      let width = 100 / (this.tabs.length || 4) + '%';
+      return this.itemWidth ? this.itemWidth : width;
+    },
+    getSliderBgColor() {
+      return this.sliderBgColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getSelectedColor() {
+      return this.selectedColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getBadgeBgColor() {
+      return this.badgeBgColor || (uni && uni.$tui && uni.$tui.color.pink) || '#f74d54';
     }
   },
   created() {
+    // 高度自适应
     setTimeout(() => {
-      // 高度自适应
       uni.getSystemInfo({
         success: (res) => {
           this.winWidth = res.windowWidth;
+          this.tabsWidth = this.width == 0 ? this.winWidth : Number(this.width);
           this.checkCor();
         }
       });
-    }, 50);
+    }, 0);
   },
   data() {
     return {
       winWidth: 0,
+      tabsWidth: 0,
       scrollLeft: 0
     };
   },
   methods: {
-    checkCor() {
+    checkCor: function () {
       let tabsNum = this.tabs.length;
-      let padding = (this.winWidth / 750) * this.padding;
-      let width = this.winWidth - padding * 2;
-      console.log('checkCor', width, tabsNum, this.winWidth, this.sliderWidth, padding);
-      let left = (width / tabsNum - (this.winWidth / 750) * this.sliderWidth) / 2 + padding;
+      let padding = uni.upx2px(Number(this.padding));
+      let width = this.tabsWidth - padding * 2;
+      let left = (width / tabsNum - uni.upx2px(Number(this.sliderWidth))) / 2 + padding;
       let scrollLeft = left;
       if (this.currentTab > 0) {
         scrollLeft = scrollLeft + (width / tabsNum) * this.currentTab;
@@ -201,14 +253,15 @@ export default {
       this.scrollLeft = scrollLeft;
     },
     // 点击标题切换当前页时改变样式
-    swichTabs(index) {
+    swichTabs: function (index) {
       let item = this.tabs[index];
       if (item && item.disabled) return;
       if (this.currentTab == index) {
         return false;
       } else {
         this.$emit('change', {
-          index: Number(index)
+          index: Number(index),
+          item: item
         });
       }
     }
@@ -223,7 +276,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  z-index: 995;
 }
 
 .up-tabs-relative {
@@ -256,6 +308,10 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: visible;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
 }
 
 .up-tabs-disabled {
@@ -267,18 +323,44 @@ export default {
   align-items: center;
   justify-content: center;
   position: relative;
-  z-index: 2;
-}
-
-.up-tabs-active {
+  z-index: 3;
+  overflow: visible;
   transition: all 0.15s ease-in-out;
 }
 
 .up-tabs-slider {
   position: absolute;
   left: 0;
-  transition: all 0.15s ease-in-out;
-  z-index: 0;
-  transform: translateZ(0);
+  transition: all 0.3s ease-in-out;
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+
+.up-tabs__badge {
+  position: absolute;
+  font-size: 24rpx;
+  height: 32rpx;
+  min-width: 20rpx;
+  padding: 0 6rpx;
+  border-radius: 40rpx;
+  right: 0;
+  top: 0;
+  transform: translate(88%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  z-index: 4;
+  font-weight: normal !important;
+}
+
+.up-badge__dot {
+  position: absolute;
+  height: 16rpx;
+  width: 16rpx;
+  border-radius: 50%;
+  right: -10rpx;
+  top: -10rpx;
+  z-index: 4;
 }
 </style>