fix(ui/button): fix button block style to class

affects: @varlet/ui
varletjs · May 19, 2021 · 433633c · 433633c
1 parent a04588e
commit 433633c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
@@ -4,7 +4,7 @@
     class="var-button var--box"
     :class="[
       `var-button--${size}`,
-      block ? 'var--flex' : 'var--inline-flex',
+      block ? 'var--flex var-button--block' : 'var--inline-flex',
       disabled ? 'var-button--disabled' : null,
       text ? `var-button--text-${type}` : `var-button--${type}`,
       text ? 'var-button--text' : 'var-elevation--1',
@@ -15,7 +15,6 @@
     :style="{
       color: textColor,
       background: color,
-      width: block ? '100%' : null,
     }"
     :disabled="disabled"
     @click="handleClick"

diff --git a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
@@ -127,7 +127,7 @@ exports[`test button example 1`] = `
   <!--v-if-->
   <div class=\\"var-button__content\\">大型按钮</div>
 </button>
-<div class=\\"app-type\\">块级按钮</div><button class=\\"var-button var--box var-button--normal var--flex var-button--primary var-elevation--1\\" style=\\"width: 100%;\\">
+<div class=\\"app-type\\">块级按钮</div><button class=\\"var-button var--box var-button--normal var--flex var-button--block var-button--primary var-elevation--1\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">块级按钮</div>
 </button>
@@ -155,7 +155,7 @@ exports[`test button example 1`] = `
 `;
 
 exports[`test button styles 1`] = `
-"<button class=\\"var-button var--box var-button--large var--flex var-button--text-default var-button--text var-button--round\\" style=\\"width: 100%;\\">
+"<button class=\\"var-button var--box var-button--large var--flex var-button--block var-button--text-default var-button--text var-button--round\\">
   <!--v-if-->
   <div class=\\"var-button__content\\">button text</div>
 </button>"

diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less
@@ -85,6 +85,10 @@
     box-shadow: none !important;
   }
 
+  &--block {
+    width: 100%;
+  }
+
   &--text {
     background-color: transparent;