bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/components/LabelSelection.vue

对比新文件
@@ -0,0 +1,89 @@
<template>
   <scroll-view class="tag" scroll-x>
      <view class="tag_list">
         <view v-for="(item, index) in TagList"
            :key="index"
            :class="{'tag_item': true, 'tagActive': index == activeId}"
            @click="change(item, index)">
            <text>{{item.name}}</text>
            <text v-if="isShow && item.num">({{item.num}})</text>
         </view>
      </view>
   </scroll-view>
</template>

<script>
   export default {
      name: "LabelSelection",
      props: {
         TagList: Array,
         isShow: Boolean
      },
      data() {
         return {
            activeId: 0
         };
      },
      methods: {
         change(item, index) {
            if (this.activeId !== index) {
               this.activeId = index
               this.$emit('change', item.id)
            }
         }
      },
      watch: {
         // TagList: {
         //    immediate: true,
         //    handler(news, old) {
         //       let list = news
         //       if (list && list.length !== 0) {
         //           this.activeId = list[0].id
         //       }
         //    }
         // }
      }
   }
</script>

<style lang="scss" scoped>
   .tag::-webkit-scrollbar {
      width: 0 !important;
   }
   .tag::-webkit-scrollbar {
      width: 0 !important;
      height: 0;
   }
   .tag {
      width: 100%;
      padding: 5rpx 0;
      box-sizing: border-box;
      .tag_list {
         width: 100%;
         display: flex;
         align-items: center;
         flex-wrap: nowrap;
         .tagActive {
            background: $nav-color !important;
            text {
               color: #FFFFFF !important;
            }
         }
         .tag_item {
            min-width: 120rpx;
            padding: 14rpx 24rpx;
            border-radius: 26rpx;
            text-align: center;
            flex-shrink: 0;
            margin-right: 20rpx;
            border: 1rpx solid #CCCCCC;
            text {
               font-size: 26rpx;
               font-weight: 400;
               line-height: 26rpx;
               color: #555555;
            }
         }
      }
   }
</style>