fix(Message): fix some style problem (#1286)

src/common/utils.ts

@@ -227,6 +227,10 @@ export const setIcon = (iconName, icon, defaultIcon) => {
       };
     }
   }
+  return {
+    [`${iconName}Name`]: '',
+    [`${iconName}Data`]: {},
+  };
 };
 
 export const isObject = (val) => typeof val === 'object' && val != null;

src/message/_example/base/index.js

@@ -17,7 +17,6 @@ Component({
         context: this,
         offset: ['20rpx', '32rpx'],
         duration: 5000,
-        icon: 'error-circle',
         content: '这是一条带图标的消息通知 5s消失',
       });
     },
@@ -26,9 +25,9 @@ Component({
       Message.info({
         context: this,
         offset: ['20rpx', 32],
-        icon: 'error-circle',
-        content: '这是一条带关闭的消息通知 常驻可关闭',
+        content: '这是一条带关闭的消息通知',
         duration: -1,
+        action: '按钮',
         closeBtn: true,
       });
     },
@@ -48,7 +47,7 @@ Component({
       Message.info({
         context: this,
         offset: [20, 32],
-        icon: 'notification',
+        icon: 'notification-filled',
         content: '这是一条带操作的消息通知',
         duration: -1,
         action: '按钮',

src/message/message.less

@@ -17,6 +17,7 @@
 @message-success-color: var(--td-message-success-color, @success-color); // 'success'主题色
 @message-warning-color: var(--td-message-warning-color, @warning-color); // 'warning'主题色
 @message-error-color: var(--td-message-error-color, @error-color); // 'error'主题色
+@message-close-icon-color: var(--td-message-close-icon-color, @font-gray-3); // 关闭按钮图标颜色
 
 @message: ~'@{prefix}-message';
 
@@ -79,6 +80,10 @@
     margin-right: @spacer;
   }
 
+  &__icon--right {
+    color: @message-close-icon-color;
+  }
+
   &__icon--right,
   .@{message}__btn--right {
     flex: 0 0 auto;
@@ -90,6 +95,6 @@
     line-height: @message-content-height;
     height: @message-content-height;
     border-radius: @message-border-radius;
-    padding: 12rpx;
+    padding: 0;
   }
 }

src/message/message.ts

@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent, ComponentsOptionsType } from '../common/sr
 import config from '../common/config';
 import { MessageProps } from './message.interface';
 import props from './props';
-import { isNumber, getRect } from '../common/utils';
+import { getRect, unitConvert, setIcon } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-message`;
@@ -52,11 +52,17 @@ export default class Message extends SuperComponent {
     },
 
     icon(icon) {
-      this.setIcon(icon);
+      const obj = setIcon('icon', icon, 'error-circle-filled');
+      this.setData({
+        ...obj,
+      });
     },
 
     closeBtn(closeBtn) {
-      this.setCloseBtn(closeBtn);
+      const obj = setIcon('closeBtn', closeBtn, 'close');
+      this.setData({
+        ...obj,
+      });
     },
   };
 
@@ -91,53 +97,6 @@ export default class Message extends SuperComponent {
     this.clearMessageAnimation();
   }
 
-  /** icon 值设置 */
-  setIcon(icon) {
-    if (!icon) {
-      this.setData({ iconName: '', iconData: {} });
-    } else if (typeof icon === 'string') {
-      this.setData({
-        iconName: icon,
-        iconData: {},
-      });
-    } else if (typeof icon === 'object') {
-      this.setData({
-        iconName: '',
-        iconData: icon,
-      });
-    } else {
-      const { theme } = this.properties;
-      const themeMessage = {
-        info: 'error-circle',
-        success: 'check-circle',
-        warning: 'error-circle',
-        error: 'error-circle',
-      };
-      this.setData({ iconName: themeMessage[theme], iconData: {} });
-    }
-  }
-
-  setCloseBtn(closeBtn) {
-    if (!closeBtn) {
-      this.setData({ closeBtnName: '', closeBtnData: {} });
-    } else if (typeof closeBtn === 'string') {
-      this.setData({
-        closeBtnName: closeBtn,
-        closeBtnData: {},
-      });
-    } else if (typeof closeBtn === 'object') {
-      this.setData({
-        closeBtnName: '',
-        closeBtnData: closeBtn,
-      });
-    } else {
-      this.setData({
-        closeBtnName: 'close',
-        closeBtnData: {},
-      });
-    }
-  }
-
   /** 检查是否需要开启一个新的动画循环 */
   checkAnimation() {
     if (!this.properties.marquee) {
@@ -194,22 +153,6 @@ export default class Message extends SuperComponent {
     this.nextAnimationContext = 0;
   }
 
-  /** offset 默认单位是 rpx 统一处理成 px 大小，因为小程序dom中实际使用的是 px */
-  offsetUnitToPx(e: number | string) {
-    if (isNumber(e)) {
-      return Number(e) / 2;
-    }
-
-    if (String(e).indexOf('rpx') > -1) {
-      return Number(String(e).split('rpx')[0]) / 2;
-    }
-
-    if (String(e).indexOf('px') > -1) {
-      return Number(String(e).split('px')[0]);
-    }
-    return 0;
-  }
-
   show() {
     const { duration, marquee, offset } = this.properties;
     this.setData({ visible: true, loop: marquee.loop });
@@ -229,7 +172,7 @@ export default class Message extends SuperComponent {
         this.setData({
           showAnimation: wx
             .createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
-            .translateY(wrapRect.height + this.offsetUnitToPx(offset[0]))
+            .translateY(wrapRect.height + unitConvert(offset[0]))
             .step()
             .export(),
         });

src/message/message.wxml

@@ -24,7 +24,7 @@
       id="{{classPrefix}}__text-wrap"
     >
       <view class="{{classPrefix}}__text {{prefix}}-class-content" id="{{classPrefix}}__text" animation="{{animation}}">
-        <view wx:if="{{content}}">{{content}}</view>
+        <block wx:if="{{content}}">{{content}}</block>
         <slot name="content"></slot>
       </view>
     </view>
@@ -33,7 +33,7 @@
       wx:if="{{action}}"
       t-class="{{classPrefix}}__btn--right {{prefix}}-class-action"
       theme="primary"
-      variant="outline"
+      variant="text"
       size="small"
       bind:tap="handleBtnClick"
       >{{action}}</t-button