feat(Tips): 单行文本时关闭按钮垂直居中 (#98)

* feat(Tips): 单行文本时关闭按钮垂直居中

* feat(Tips): getTextType避免重复触发didUpdate

Co-authored-by: wyj <[email protected]>

Author: wyj580231

src/Tips/TipsItem/index.less

@@ -1,18 +1,19 @@
-@import (reference) "../../_base/index.less";
+@import (reference) '../../_base/index.less';
 .amd-tips-content-core {
-    display: flex;
+  display: flex;
+  align-items: center;
 }
 .amd-tips-title {
-    overflow: hidden;
-    line-height: 1.4;
-    text-overflow: ellipsis;
-    display: box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 .amd-tips-content {
-    .amd-button-content {
-        font-size: 24 * @rpx;
-        height: 49 * @rpx;
-    }
+  .amd-button-content {
+    font-size: 24 * @rpx;
+    height: 49 * @rpx;
+  }
 }

src/Tips/index.axml

@@ -1,33 +1,20 @@
 <view 
-  class="amd-tips {{className ? className : ''}}"
+  class="amd-tips {{className ? className : ''}} amd-tips-{{$id}} amd-tips-{{textType}}"
   a:if="{{_show}}">
-  <view class="amd-tips-wrap">
-    <view class="amd-tips-wrap-pseudo">
-      <view class="amd-tips-wrap-pseudo-content">
-        <tips-item image="{{image}}"
-          buttonText="{{buttonText}}"
-          buttonPosition="{{buttonPosition}}"
-          showClose="{{showClose}}"
-          onButtonTap="onButtonTap"
-          onHideTips="onHideTips"
-          title="{{title}}">
-            <slot/>
-          </tips-item>
-      </view>
-      <view class="amd-tips-arrow amd-tips-arrow-{{arrowPosition}}"
-        a:if="{{arrowPosition}}" />
-    </view>
-    <!-- 为了实现背景半透明，箭头与背景叠加的而复制一份内容，通过定位实现 -->
-    <view class="amd-tips-wrap-real">
-      <tips-item image="{{image}}"
+  <view class="amd-tips-wrap {{}}">
+    <view class="amd-tips-wrap-content">
+      <tips-item 
+        image="{{image}}"
         buttonText="{{buttonText}}"
         buttonPosition="{{buttonPosition}}"
         showClose="{{showClose}}"
         onButtonTap="onButtonTap"
         onHideTips="onHideTips"
-        title="{{title}}" >
-          <slot/>
-    </tips-item>
+        title="{{title}}">
+        <slot/>
+      </tips-item>
     </view>
+    <view class="amd-tips-arrow amd-tips-arrow-{{arrowPosition}}"
+      a:if="{{arrowPosition}}" />
   </view>
 </view>

src/Tips/index.less

@@ -1,4 +1,4 @@
-@import (reference) "./variable.less";
+@import (reference) './variable.less';
 
 @tipsPrefix: amd-tips;
 
@@ -10,29 +10,16 @@
     color: @color-text-base;
     border-radius: @corner-radius-lg;
     max-width: 702 * @rpx;
-    &-pseudo {
-      opacity: 0.75;
-      background: #000;
-      border-radius: @corner-radius-lg;
-      z-index: 5;
-      &-content {
-        opacity: 0;
-        display: flex;
-        align-items: center;
-        padding: @v-spacing-standard @h-spacing-large;
-        pointer-events: none;
-      }
-    }
-    &-real {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+    background: rgba(0, 0, 0, 0.75);
+    &-content {
       display: flex;
       align-items: center;
-      padding: 10 * @rpx @h-spacing-large;
-      border-radius: @corner-radius-lg;
+      padding: @v-spacing-standard @h-spacing-large;
+    }
+  }
+  &-single {
+    :not(.@{tipsPrefix}-content-bottom) ~ .@{tipsPrefix}-close {
+      align-self: center;
     }
   }
   &-content {
@@ -50,6 +37,7 @@
     box-sizing: content-box;
     margin-top: 6 * @rpx;
     margin-bottom: 6 * @rpx;
+    flex-shrink: 0;
   }
   &-close {
     align-self: flex-start;
@@ -75,11 +63,6 @@
       }
     }
   }
-  &-title {
-    display: flex;
-    flex: 1;
-    align-items: center;
-  }
   &-arrow {
     position: absolute;
     width: 0;

src/Tips/index.ts

@@ -1,27 +1,41 @@
 import { TipsDefaultProps } from './props';
-import { log } from '../_util/console';
 
 Component({
   props: TipsDefaultProps,
   data: {
-    _show: false
+    _show: false,
+    textType: 'multi',
   },
   didMount() {
     this.setData({
-      _show: this.props.visible
-    })
+      _show: this.props.visible,
+    });
+    this.getTextType();
   },
   didUpdate(prevProps) {
-    if(prevProps.visible !== this.props.visible){
+    if (prevProps.visible !== this.props.visible) {
       this.setData({
-        _show: this.props.visible
-      })
-      if(this.props.visible === false){
-        this.beforeClose()
+        _show: this.props.visible,
+      });
+      if (this.props.visible === false) {
+        this.beforeClose();
       }
     }
+    if (prevProps.title !== this.props.title) {
+      this.getTextType();
+    }
   },
   methods: {
+    getTextType() {
+      my.createSelectorQuery()
+        .select(`.amd-tips-${this.$id} .amd-tips-title`)
+        .boundingClientRect()
+        .exec((ret) => {
+          if (ret && ret[0] && ret[0].height) {
+            this.setData({ textType: ret[0].height < 30 ? 'single' : 'multi' });
+          }
+        });
+    },
     onButtonTap() {
       const { onButtonTap } = this.props;
       if (onButtonTap) {
@@ -32,12 +46,12 @@ Component({
       this.setData({
         _show: t,
       });
-      this.beforeClose()
+      this.beforeClose();
     },
-    beforeClose(){
-      if(typeof this.props.onClose ==="function"){
-        this.props.onClose()
+    beforeClose() {
+      if (typeof this.props.onClose === 'function') {
+        this.props.onClose();
       }
-    }
+    },
   },
 });