From 2b3847d8c3bffbb11d4c3dd2e60ff59cf4e52fe4 Mon Sep 17 00:00:00 2001
From: mrayi <1078464063@qq.com>
Date: Wed, 17 Jan 2024 13:52:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(button):=20=E4=BF=AE=E5=A4=8D=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=20color=20=E6=97=B6=E7=9A=84=20border=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#2843)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__VUE/button/__tests__/button.spec.ts      |  6 ++++--
 src/packages/__VUE/button/button.taro.vue      | 18 ++++++++----------
 src/packages/__VUE/button/button.vue           | 18 ++++++++----------
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/packages/__VUE/button/__tests__/button.spec.ts b/src/packages/__VUE/button/__tests__/button.spec.ts
index caed5e95b3..8f6a4e9b85 100644
--- a/src/packages/__VUE/button/__tests__/button.spec.ts
+++ b/src/packages/__VUE/button/__tests__/button.spec.ts
@@ -63,11 +63,13 @@ test('props color & plain', async () => {
   });
 
   const btn = wrapper.findComponent(Button);
-  expect(btn.html()).toContain('background: blue');
+  expect(btn.attributes('style')).toContain('color: blue');
 
   wrapper.setProps({
     plain: true
   });
   await nextTick();
-  expect(btn.html()).toContain('border-color: blue');
+  console.log(btn.attributes('style'));
+  expect(btn.attributes('style')).toContain('background: rgb(255, 255, 255)');
+  expect(btn.attributes('style')).toContain('border-color: blue');
 });
diff --git a/src/packages/__VUE/button/button.taro.vue b/src/packages/__VUE/button/button.taro.vue
index cfff16cfee..d07670e889 100644
--- a/src/packages/__VUE/button/button.taro.vue
+++ b/src/packages/__VUE/button/button.taro.vue
@@ -90,20 +90,18 @@ const classes = computed(() => {
 });
 
 const getStyle = computed(() => {
-  const style: CSSProperties = {};
+  let style: CSSProperties = {};
   if (color?.value) {
-    if (plain.value) {
-      style.color = color.value;
-      style.background = '#fff';
-      if (!color.value?.includes('gradient')) {
-        style.borderColor = color.value;
-      }
+    style = {
+      color: plain.value ? color.value : '#fff',
+      background: plain.value ? '#fff' : `border-box ${color.value}`
+    };
+    if (color.value.includes('gradient')) {
+      style.borderColor = 'transparent';
     } else {
-      style.color = '#fff';
-      style.background = color.value;
+      style.borderColor = color.value;
     }
   }
-
   return style;
 });
 </script>
diff --git a/src/packages/__VUE/button/button.vue b/src/packages/__VUE/button/button.vue
index ebc0959dc2..84f62aaa95 100644
--- a/src/packages/__VUE/button/button.vue
+++ b/src/packages/__VUE/button/button.vue
@@ -79,20 +79,18 @@ const classes = computed(() => {
 });
 
 const getStyle = computed(() => {
-  const style: CSSProperties = {};
+  let style: CSSProperties = {};
   if (color?.value) {
-    if (plain.value) {
-      style.color = color.value;
-      style.background = '#fff';
-      if (!color.value?.includes('gradient')) {
-        style.borderColor = color.value;
-      }
+    style = {
+      color: plain.value ? color.value : '#fff',
+      background: plain.value ? '#fff' : `border-box ${color.value}`
+    };
+    if (color.value.includes('gradient')) {
+      style.borderColor = 'transparent';
     } else {
-      style.color = '#fff';
-      style.background = color.value;
+      style.borderColor = color.value;
     }
   }
-
   return style;
 });
 </script>