feat: hTab组件支持百度平台

HTab组件支持百度平台
hewx815 · Aug 3, 2023 · f0d3318 · f0d3318
1 parent dc5b2b2
commit f0d3318
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 85 deletions.
diff --git a/for-vue2/src/App.vue b/for-vue2/src/App.vue
@@ -16,4 +16,8 @@ body::-webkit-scrollbar {
 #app {
   background-color: #fff;
 }
+
+page {
+  background-color: #fff;
+}
 </style>
diff --git a/for-vue2/src/packages/components/HTab/HTab.vue b/for-vue2/src/packages/components/HTab/HTab.vue
@@ -1,6 +1,6 @@
 <template>
   <scroll-view
-    class="h_tab"
+    :class="[`h_tab`, `h_tab-${vueId}`]"
     :style="{ height: scrollHeight, width: scrollWidth }"
     :scroll-x="direction === 'x'"
     :scroll-y="direction === 'y'"
@@ -13,24 +13,21 @@
     <view
       v-if="showActive"
       class="h_tab_active"
-      :class="{
-        'h_tab_active-none': activeAspect === 'none',
-        'h_tab_active-left': activeAspect === 'left',
-        'h_tab_active-right': activeAspect === 'right',
-        'h_tab_active-top': activeAspect === 'top',
-        'h_tab_active-bottom': activeAspect === 'bottom',
-      }"
+      :class="[
+        `h_tab_active-${activeAspect}`,
+        `h_tab_active-${vueId}`
+      ]"
       :style="activeStyles"
     >
       <slot name="active" />
     </view>
     <!-- 选项卡容器 -->
     <view
       class="h_tab_container"
-      :class="{
-        'h_tab_container-x': direction === 'x',
-        'h_tab_container-y': direction === 'y',
-      }"
+      :class="[
+        `h_tab_container-${direction}`,
+        `h_tab_container-${vueId}`
+      ]"
     >
       <slot />
     </view>
@@ -122,6 +119,8 @@ export default {
   },
   data() {
     return {
+      vueId: 'vueId',
+
       scrollViewScroll: {}, // scroll-view 滚动信息
 
       scrollViewRect: {}, // scroll-view 节点信息
@@ -142,12 +141,11 @@ export default {
     },
     // scroll-view 高
     scrollHeight() {
-      console.log('scrollHeight');
       if (this.height) {
         if (typeof this.height === 'number') return `${this.height}px`;
         return this.height;
       }
-      return this.direction === 'x' ? '160rpx' : '1246rpx';
+      return this.direction === 'x' ? '160rpx' : '1000rpx';
     },
     // 滚动到中间为止的坐标值
     scrollXY() {
@@ -195,6 +193,12 @@ export default {
     },
 
   },
+  created() {
+    // #ifdef MP-BAIDU
+    // eslint-disable-next-line no-underscore-dangle
+    this.vueId = this.$scope._$vueId;
+    // #endif
+  },
   mounted() {
     this.resize();
   },
@@ -242,30 +246,42 @@ export default {
                 console.error(err);
               });
           });
-        }, 0);
+        }, 200);
       });
     },
     // 获取 scroll-view rect信息
     getRect() {
+      let className = '.h_tab';
+      // #ifdef MP-BAIDU
+      className = `.h_tab-${this.vueId}`;
+      // #endif
       return new Promise((resolve) => {
-        uni.createSelectorQuery().in(this).select('.h_tab').boundingClientRect((data) => {
+        uni.createSelectorQuery().in(this).select(className).boundingClientRect((data) => {
           resolve(data);
         })
           .exec();
       });
     },
     // 获取 scroll-view scroll信息
     getScroll() {
+      let className = '.h_tab';
+      // #ifdef MP-BAIDU
+      className = `.h_tab-${this.vueId}`;
+      // #endif
       return new Promise((resolve) => {
-        uni.createSelectorQuery().in(this).select('.h_tab').scrollOffset((data) => {
+        uni.createSelectorQuery().in(this).select(className).scrollOffset((data) => {
           resolve(data);
         })
           .exec();
       });
     },
     getContainerRect() {
+      let className = '.h_tab_container';
+      // #ifdef MP-BAIDU
+      className = `.h_tab_container-${this.vueId}`;
+      // #endif
       return new Promise((resolve) => {
-        uni.createSelectorQuery().in(this).select('.h_tab_container').boundingClientRect((data) => {
+        uni.createSelectorQuery().in(this).select(className).boundingClientRect((data) => {
           resolve(data);
         })
           .exec();

diff --git a/for-vue2/src/packages/components/HTab/README.md b/for-vue2/src/packages/components/HTab/README.md
@@ -18,7 +18,7 @@ outline: deep
 
 ## 兼容性
 
-<SupportTable  H5  WEIXIN TOUTIAO/>
+<SupportTable  H5  WEIXIN TOUTIAO BAIDU/>
 
 ## 使用
 
@@ -84,7 +84,7 @@ outline: deep
 <PreviewBtn path="pages/HTab/HTabItemStyle"/>
 
 ::: code-group
-<<< @/for-vue2/src/pages/HTab/HTabItemStyle.vue#template {17-23,40-46,62-68,83-84,99-100 vue} [template]
+<<< @/for-vue2/src/pages/HTab/HTabItemStyle.vue#template {18-24,41-47,63-69,84-85,100-101 vue} [template]
 <<< @/for-vue2/src/pages/HTab/HTabItemStyle.vue#script {13-23 vue} [script]
 <<< @/for-vue2/src/pages/HTab/HTabItemStyle.vue#style {vue} [style]
 :::
@@ -124,7 +124,7 @@ outline: deep
 | value/v-model         | 当前选中`HTabItem`所绑定的 value 值 | `String` `Number` `Boolean` |               -               |       -        |
 | direction             | 标签栏的方向                        |          `String`           |              x,y              |       y        |
 | width                 | 标签栏的宽度                        |      `String` `Number`      |               -               |  160rpx/100vw  |
-| height                | 标签栏的高度                        |      `String` `Number`      |               -               | 1246rpx/160rpx |
+| height                | 标签栏的高度                        |      `String` `Number`      |               -               | 1200rpx/160rpx |
 | activeAspect          | 滑块的朝向                          |          `String`           | none,left, right, top, bottom |      none      |
 | activeDuration        | 滑块过渡时间(单位:ms)               |          `Number`           |               -               |      500       |
 | activeBackgroundColor | 滑块的背景颜色                      |          `String`           |               -               |    #FFFFFF     |
@@ -166,9 +166,9 @@ outline: deep
 
 ## Item Events
 
-| 事件名 | 描述                       | 参数 |
-| :----- | :------------------------- | :--: |
-| select | 当前选项卡被选中触发的事件 |  -   |
+| 事件名 | 描述                       | 参数  |
+| :----- | :------------------------- | :---: |
+| select | 当前选项卡被选中触发的事件 |   -   |
 
 ## Item Slot
 

diff --git a/for-vue2/src/packages/components/HTabItem/HTabItem.vue b/for-vue2/src/packages/components/HTabItem/HTabItem.vue
@@ -1,32 +1,25 @@
 <template>
   <view
     class="h_tab_item"
-    :class="{
-      'h_tab_item-y': direction === 'y',
-      'h_tab_item-x': direction === 'x',
-      'h_tab_item-tab-y': HTabDirection === 'y',
-      'h_tab_item-tab-x': HTabDirection === 'x',
-    }"
+    :class="[
+      `h_tab_item-${direction}`,
+      `h_tab_item-tab-${HTabDirection}`,
+      `h_tab_item-${vueId}`,
+    ]"
     :style="itemStyles"
     @click="itemClick(value)"
   >
     <slot>
       <image
         v-if="image"
         class="h_tab_item_image"
-        :class="{
-          'h_tab_item_image-y': direction === 'y',
-          'h_tab_item_image-x': direction === 'x',
-        }"
+        :class="[`h_tab_item_image-${direction}`]"
         :src="imageSrc"
         :style="imageStyles"
       />
       <text
         class="h_tab_item_label"
-        :class="{
-          'h_tab_item_label-y': direction === 'y',
-          'h_tab_item_label-x': direction === 'x',
-        }"
+        :class="[`h_tab_item_label-${direction}`]"
         :style="labelStyles"
       >
         {{ labelText }}
@@ -114,6 +107,8 @@ export default {
   },
   data() {
     return {
+      vueId: '',
+
       getHTabDirectionCopy: () => undefined,
       getHTabValueCopy: () => undefined,
     };
@@ -149,18 +144,29 @@ export default {
         ...this.$h.cssConverter(this.HTabValue === this.value ? this.activeLabelStyle : {}, 'object'),
       }, 'string');
     },
+    itemClassName() {
+      return `h_tab_item-tab-${this.HTabDirection} h_tab_item-${this.direction}`;
+    },
   },
   created() {
     this.getHTabValueCopy = this.getHTabValue;
     this.getHTabDirectionCopy = this.getHTabDirection;
     this.setItem(this.value, this.resize, this.select);
+    // #ifdef MP-BAIDU
+    // eslint-disable-next-line no-underscore-dangle
+    this.vueId = this.$scope._$vueId;
+    // #endif
   },
   methods: {
     // 获取节点信息
     resize() {
+      let className = '.h_tab_item';
+      // #ifdef MP-BAIDU
+      className = `.h_tab_item-${this.vueId}`;
+      // #endif
       return new Promise((resolve) => {
         this.$nextTick(() => {
-          uni.createSelectorQuery().in(this).select('.h_tab_item').boundingClientRect((data) => {
+          uni.createSelectorQuery().in(this).select(className).boundingClientRect((data) => {
             resolve(data);
           })
             .exec();

diff --git a/for-vue2/src/pages/HTab/HTabActiveStyle.vue b/for-vue2/src/pages/HTab/HTabActiveStyle.vue
@@ -13,7 +13,7 @@
           height="100px"
         >
           <HTabItem
-            v-for="( item, index ) in 10"
+            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
             :key="index"
             :value="index"
             label="none"
@@ -27,7 +27,7 @@
           height="100px"
         >
           <HTabItem
-            v-for="( item, index ) in 10"
+            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
             :key="index"
             :value="index"
             label="left"
@@ -41,7 +41,7 @@
           height="100px"
         >
           <HTabItem
-            v-for="( item, index ) in 10"
+            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
             :key="index"
             :value="index"
             label="right"
@@ -57,7 +57,7 @@
         style="margin-top: 20rpx;"
       >
         <HTabItem
-          v-for="( item, index ) in 10"
+          v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
           :key="index"
           :value="index"
           label="top"
@@ -72,7 +72,7 @@
         style="margin-top: 20rpx;"
       >
         <HTabItem
-          v-for="( item, index ) in 10"
+          v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
           :key="index"
           :value="index"
           label="bottom"
@@ -92,7 +92,7 @@
           :active-duration="2000"
         >
           <HTabItem
-            v-for="( item, index ) in 10"
+            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
             :key="index"
             :value="index"
             label="过渡时间"
@@ -111,7 +111,7 @@
           active-background-color="rgb(145, 145, 205)"
         >
           <HTabItem
-            v-for="( item, index ) in 10"
+            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
             :key="index"
             :value="index"
             label="背景颜色"
@@ -136,7 +136,7 @@
           }"
         >
           <HTabItem
-            v-for="( item, index ) in 10 "
+            v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] "
             :key="index"
             :value="index"
             label="自定义样式"
@@ -153,7 +153,7 @@
 export default {
   data() {
     return {
-      active: 2,
+      active: 0,
     };
   },
 };

diff --git a/for-vue2/src/pages/HTab/HTabBase.vue b/for-vue2/src/pages/HTab/HTabBase.vue
@@ -3,9 +3,9 @@
   <view class="box">
     <HTab v-model="active">
       <HTabItem
-        v-for="( item, index ) in 30"
+        v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
         :key="index"
-        :value="item"
+        :value="index"
         :label="`套餐${item}`"
       />
     </HTab>
@@ -21,7 +21,7 @@
 export default {
   data() {
     return {
-      active: 1,
+      active: 0,
     };
   },
 };

diff --git a/for-vue2/src/pages/HTab/HTabDirection.vue b/for-vue2/src/pages/HTab/HTabDirection.vue
@@ -25,11 +25,11 @@
       :direction="tabDirection"
     >
       <HTabItem
-        v-for="( item, index ) in 20"
+        v-for="( item, index ) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]"
         ref="tabItem"
         :key="index"
         :direction="tabItemDirection"
-        :value="item"
+        :value="index"
         :label="`套餐${item}`"
         image="/static/logo-shadow.png"
       />
@@ -44,7 +44,7 @@ export default {
   data() {
     return {
 
-      active: 1,
+      active: 0,
       tabDirection: 'y',
       tabItemDirection: 'y',