fix(button): 修复自定义 color 时的 border 样式 (#2843)

jdf2e · Jan 17, 2024 · 2b3847d · 2b3847d
1 parent fd5fdaa
commit 2b3847d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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>