feat:选择文字

miniprogram/ui/button/button.less

@@ -27,11 +27,11 @@ wx-button:not([size=mini]) {
 
     &--primary {
         background: rgba(255, 215, 25, 1);
-        box-shadow: 0px 10rpx 4rpx #DBB917;
+        box-shadow: 0px 10rpx 2rpx #DBB917;
 
         &.disabled {
             background: rgba(255, 215, 25, 0.5);
-            box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
+            box-shadow: 0px 10rpx 2rpx rgba(219, 185, 23, 0.5);
         }
 
         &.active {
@@ -43,11 +43,11 @@ wx-button:not([size=mini]) {
 
     &--green {
         background: #93d333;
-        box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
+        box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 1);
 
         &.disabled {
             background: rgba(147, 211, 51, 0.5);
-            box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
+            box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 0.5);
         }
 
         &.active {
@@ -60,18 +60,20 @@ wx-button:not([size=mini]) {
     &--white {
         color: rgba(34, 36, 37, 0.9);
         background: #fff;
-        box-shadow: 0 6rpx 0 rgba(255, 255, 255, 0.7);
+        box-shadow: 0 8rpx 0rpx rgba(223, 220, 220, 1);
+        border: 2rpx solid rgba(223, 220, 220, 1);
 
         &.disabled {
+            color: rgba(34, 36, 37, 0.7);
             background: rgba(255, 255, 255, 0.8);
-            box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.55);
+            box-shadow: 0px 8rpx 0rpx rgba(223, 220, 220, 0.9);
         }
 
         &.plain {
             color: #fff;
             background: rgba(255, 255, 255, 0.2);
             border: 2rpx solid rgba(255, 255, 255, 1);
-            box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.88);
+            box-shadow: 0px 8rpx 0rpx rgba(255, 255, 255, 0.88);
 
             // &.disabled {
             //     background: rgba(255, 255, 255, 0.2);
@@ -81,8 +83,8 @@ wx-button:not([size=mini]) {
         }
 
         &.active {
-            transform: translateY(6rpx);
-            box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
+            transform: translateY(8rpx);
+            box-shadow: 0 0 0 rgba(223, 220, 220, 1);
             /* 阴影效果 */
         }
     }

miniprogram/ui/button/button.ts

@@ -82,7 +82,15 @@ Component({
      */
     data: {},
     lifetimes: {
-        attached() {},
+        attached() {
+            const { type, plain, disabled } = this.data;
+            if (type === 'white' && !plain) {
+                const iconColor = disabled ? 'rgba(34, 36, 37, 0.7)' : 'rgba(34, 36, 37, 0.9)';
+                this.setData({
+                    iconColor,
+                });
+            }
+        },
     },
     /**
      * 组件的方法列表

miniprogram/ui/button/button.wxml

@@ -40,7 +40,7 @@
             size="1.2em"
             name="{{ icon }}"
             size="{{ iconSize }}"
-            color="{{ iconColor }}"
+            color="{{ wxs.getIconColor(iconColor, type, plain, disabled) }}"
             class-prefix="{{ iconClassPrefix }}"
             class="toy-button__icon" />
     </block>

miniprogram/ui/button/button.wxs

@@ -6,18 +6,25 @@ module.exports = {
         var loading = dataSet.loading;
 
         if (instance && !disabled && !loading) {
-            instance.addClass('active')
+            instance.addClass('active');
         }
     },
 
     touchEnd: function (event, ownerInstance) {
-        var instance = event.instance
+        var instance = event.instance;
         var dataSet = instance.getDataset();
         var disabled = dataSet.disabled;
         var loading = dataSet.loading;
-        
+
         if (instance && !disabled && !loading) {
-            instance.removeClass('active')
+            instance.removeClass('active');
         }
     },
+
+    getIconColor: function (iconColor, type, plain, disabled) {
+        if (type === 'white' && !plain) {
+            return disabled ? 'rgba(34, 36, 37, 0.7)' : 'rgba(34, 36, 37, 0.9)';
+        }
+        return iconColor;
+    },
 };