bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,142 @@
<template>
   <view
       class="u-tabbar-item"
       :style="[$u.addStyle(customStyle)]"
       @tap="clickHandler"
   >
      <view class="u-tabbar-item__icon">
         <u-icon
             v-if="icon"
             :name="icon"
             :color="isActive? parentData.activeColor : parentData.inactiveColor"
             :size="20"
         ></u-icon>
         <template v-else>
            <slot
                v-if="isActive"
                name="active-icon"
            />
            <slot
                v-else
                name="inactive-icon"
            />
         </template>
         <u-badge
            absolute
            :offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
             :customStyle="badgeStyle"
             :isDot="dot"
             :value="badge || (dot ? 1 : null)"
             :show="dot || badge > 0"
         ></u-badge>
      </view>
		
      <slot name="text">
         <text
             class="u-tabbar-item__text"
             :style="{
               color: isActive? parentData.activeColor : parentData.inactiveColor
            }"
         >{{ text }}</text>
      </slot>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * TabbarItem åº•éƒ¨å¯¼èˆªæ å­ç»„件
    * @description æ­¤ç»„件提供了自定义tabbar的能力。
    * @tutorial https://www.uviewui.com/components/tabbar.html
    * @property {String | Number}   name      item标签的名称，作为与u-tabbar的value参数匹配的标识符
    * @property {String}         icon      uView内置图标或者绝对路径的图片
    * @property {String | Number}   badge      å³ä¸Šè§’的角标提示信息
    * @property {Boolean}         dot         æ˜¯å¦æ˜¾ç¤ºåœ†ç‚¹ï¼Œå°†ä¼šè¦†ç›–badge参数（默认 false ï¼‰
    * @property {String}         text      æè¿°æ–‡æœ¬
    * @property {Object | String}   badgeStyle   æŽ§åˆ¶å¾½æ ‡çš„位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ï¼‰
    * @property {Object}         customStyle   å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    * 
    * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
    */
   export default {
      name: 'u-tabbar-item',
      mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
      data() {
         return {
            isActive: false, // æ˜¯å¦å¤„于激活状态
            parentData: {
               value: null,
               activeColor: '',
               inactiveColor: ''
            }
         }
      },
      created() {
         this.init()
      },
      methods: {
         init() {
            // æ”¯ä»˜å®å°ç¨‹åºä¸æ”¯æŒprovide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
            this.updateParentData()
            if (!this.parent) {
               uni.$u.error('u-tabbar-item必须搭配u-tabbar组件使用')
            }
            // æœ¬å­ç»„件在u-tabbar的children数组中的索引
            const index = this.parent.children.indexOf(this)
            // åˆ¤æ–­æœ¬ç»„件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
            this.isActive = (this.name || index) === this.parentData.value
         },
         updateParentData() {
            // æ­¤æ–¹æ³•åœ¨mixin中
            this.getParentData('u-tabbar')
         },
         // æ­¤æ–¹æ³•å°†ä¼šè¢«çˆ¶ç»„件u-tabbar调用
         updateFromParent() {
            // é‡æ–°åˆå§‹åŒ–
            this.init()
         },
         clickHandler() {
            this.$nextTick(() => {
               const index = this.parent.children.indexOf(this)
               const name = this.name || index
               // ç‚¹å‡»çš„item为非激活的item才发出change事件
               if (name !== this.parent.value) {
                  this.parent.$emit('change', name)
               }
               this.$emit('click', name)
            })
         }
      },
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-tabbar-item {
      @include flex(column);
      align-items: center;
      justify-content: center;
      flex: 1;
		
      &__icon {
         @include flex;
         position: relative;
         width: 150rpx;
         justify-content: center;
      }

      &__text {
         margin-top: 2px;
         font-size: 12px;
         color: $u-content-color;
      }
   }

   /* #ifdef MP */
   // ç”±äºŽå°ç¨‹åºéƒ½ä½¿ç”¨shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
   :host {
      flex: 1
   }
   /* #endif */
</style>