fix: picker组件文本超长省略号处理 (#1639)

src/packages/__VUE/address/index.scss

@@ -72,6 +72,7 @@
       color: #1d1e1e;
 
       .tab-item {
+        position: relative;
         min-width: 2px;
         margin-right: 30px;
         display: block;
@@ -94,6 +95,22 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
+        .region-tab-line-mini {
+          position: absolute;
+          bottom: -10px;
+          left: 0px;
+          display: inline-block;
+          margin-top: 5px;
+          width: 0;
+          height: 3px;
+          background: $address-region-tab-line;
+          transition: 0.2s all linear;
+
+          &.active {
+            width: 26px;
+          }
+        }
       }
 
       .region-tab-line {

src/packages/__VUE/address/index.taro.vue

@@ -41,9 +41,9 @@
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }} </view>
-          </view>
 
-          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
+            <view :class="{ 'region-tab-line-mini': true, active: index == tabIndex }" ref="regionLine"></view>
+          </view>
         </view>
 
         <view class="region-con">
@@ -78,8 +78,8 @@
             @click="changeRegionTab(item, key, index)"
           >
             <view>{{ getTabName(item, index) }}</view>
+            <view :class="{ 'region-tab-line-mini': true, active: index == tabIndex }"></view>
           </view>
-          <view class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></view>
         </view>
         <view class="elevator-group">
           <nut-elevator
@@ -349,7 +349,6 @@ export default create({
             }
           }
         }
-        lineAnimation();
       }
     };
 
@@ -393,20 +392,7 @@ export default create({
     const clickOverlay = () => {
       closeWay.value = 'mask';
     };
-    // 移动下面的红线
-    const lineAnimation = () => {
-      setTimeout(() => {
-        Taro.createSelectorQuery()
-          .selectAll(`.${tabName.value[tabIndex.value]}`)
-          .boundingClientRect((rects) => {
-            // console.log(rects);
-            (rects as any).forEach((rect) => {
-              if (rect.width > 0) lineDistance.value = rect.left;
-            });
-          })
-          .exec();
-      }, 100);
-    };
+
     // 切换下一级列表
     const nextAreaList = (item: RegionData | string) => {
       // onchange 接收的参数
@@ -428,8 +414,6 @@ export default create({
       if (tabIndex.value < 3) {
         tabIndex.value = tabIndex.value + 1;
 
-        lineAnimation();
-
         // 切换下一个
         calBack.next = tabName.value[tabIndex.value];
         calBack.value = item as string;
@@ -443,7 +427,6 @@ export default create({
     const changeRegionTab = (item: RegionData, key: number, index: number) => {
       if (getTabName(item, index)) {
         tabIndex.value = index;
-        lineAnimation();
       }
     };
 
@@ -473,7 +456,6 @@ export default create({
         (selectedRegion as any)[tabName.value[i]] = {};
       }
       tabIndex.value = 0;
-      lineAnimation();
     };
 
     // 关闭

src/packages/__VUE/picker/index.scss

@@ -127,6 +127,9 @@
       line-height: $picker-item-height;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
 
       &-hidden {
         visibility: hidden;
@@ -141,6 +144,10 @@
       line-height: $picker-item-height;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }