[improvement] Button: update disabled style (#1886)

2025-04-06 03:57:59 +08:00 · 2018-10-02 17:24:33 +08:00 · 2018-10-02 17:24:33 +08:00 · 1f0b41ec20
commit 1f0b41ec20
parent beebeaf5b7
6 changed files with 102 additions and 115 deletions
--- a/packages/button/demo/index.vue
+++ b/packages/button/demo/index.vue
@ -1,43 +1,40 @@
 <template>
  <demo-section>
-    <demo-block :title="$t('title1')">
+    <demo-block :title="$t('type')">
      <div class="demo-button-row">
-        <van-button type="default">{{ $t('default') }}</van-button>
        <van-button type="primary">{{ $t('primary') }}</van-button>
+        <van-button type="danger">{{ $t('danger') }}</van-button>
      </div>
+      <van-button type="default">{{ $t('default') }}</van-button>
      <van-button type="warning">{{ $t('warning') }}</van-button>
-      <van-button type="danger">{{ $t('danger') }}</van-button>
    </demo-block>

    <demo-block :title="$t('plain')">
-      <div class="demo-button-row">
-        <van-button type="default" plain>{{ $t('default') }}</van-button>
-        <van-button type="primary" plain>{{ $t('primary') }}</van-button>
-      </div>
-      <van-button type="warning" plain>{{ $t('warning') }}</van-button>
-      <van-button type="danger" plain>{{ $t('danger') }}</van-button>
+      <van-button plain type="primary">{{ $t('warning') }}</van-button>
+      <van-button plain type="danger">{{ $t('danger') }}</van-button>
    </demo-block>

-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('disabled')">
+      <van-button disabled type="primary">{{ $t('disabled') }}</van-button>
+      <van-button disabled type="danger">{{ $t('disabled') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('loading')">
+      <van-button loading type="primary" />
+      <van-button loading type="danger" />
+    </demo-block>
+
+    <demo-block :title="$t('shape')">
+      <van-button type="primary" square>{{ $t('square') }}</van-button>
+      <van-button type="danger" round>{{ $t('round') }}</van-button>
+    </demo-block>
+
+    <demo-block :title="$t('size')">
      <van-button size="large">{{ $t('large') }}</van-button>
      <van-button size="normal">{{ $t('normal') }}</van-button>
      <van-button size="small">{{ $t('small') }}</van-button>
      <van-button size="mini">{{ $t('mini') }}</van-button>
    </demo-block>
-
-    <demo-block :title="$t('disabled')">
-      <van-button disabled>{{ $t('disabled') }}</van-button>
-    </demo-block>
-
-    <demo-block :title="$t('title3')">
-      <van-button loading />
-      <van-button loading type="danger" />
-    </demo-block>
-
-    <demo-block :title="$t('title4')">
-      <van-button type="danger" square>{{ $t('square') }}</van-button>
-      <van-button type="danger" round>{{ $t('round') }}</van-button>
-    </demo-block>
  </demo-section>
 </template>

@ -45,10 +42,10 @@
 export default {
  i18n: {
    'zh-CN': {
-      title1: '按钮类型',
-      title2: '按钮尺寸',
-      title3: '加载状态',
-      title4: '按钮形状',
+      type: '按钮类型',
+      size: '按钮尺寸',
+      loading: '加载状态',
+      shape: '按钮形状',
      default: '默认按钮',
      primary: '主要按钮',
      danger: '危险按钮',
@ -62,10 +59,10 @@ export default {
      round: '圆形按钮'
    },
    'en-US': {
-      title1: 'Type',
-      title2: 'Size',
-      title3: 'Loading',
-      title4: 'Shape',
+      type: 'Type',
+      size: 'Size',
+      loading: 'Loading',
+      shape: 'Shape',
      default: 'Default',
      primary: 'Primary',
      danger: 'Danger',
--- a/packages/button/en-US.md
+++ b/packages/button/en-US.md
@ -12,19 +12,38 @@ Vue.use(Button);
 #### Type

 ```html
-<van-button type="default">Default</van-button>
 <van-button type="primary">Primary</van-button>
-<van-button type="warning">Warning</van-button>
 <van-button type="danger">Danger</van-button>
+<van-button type="default">Default</van-button>
+<van-button type="warning">Warning</van-button>
 ```

 #### Plain

 ```html
-<van-button type="default" plain>Default</van-button>
-<van-button type="primary" plain>Primary</van-button>
-<van-button type="warning" plain>Warning</van-button>
-<van-button type="danger" plain>Danger</van-button>
+<van-button plain type="primary">Primary</van-button>
+<van-button plain type="danger">Danger</van-button>
+```
+
+#### Disabled
+
+```html
+<van-button disabled type="primary">Diabled</van-button>
+<van-button disabled type="danger">Diabled</van-button>
+```
+
+#### Loading
+
+```html 
+<van-button loading type="primary" />
+<van-button loading type="primary" />
+```
+
+#### Shape
+
+```html 
+<van-button square type="primary">Square</van-button>
+<van-button round type="danger">Round</van-button>
 ```

 #### Size
@ -36,26 +55,6 @@ Vue.use(Button);
 <van-button size="mini">Mini</van-button>
 ```

-#### Disabled
-
-```html
-<van-button disabled>Diabled</van-button>
-```
-
-#### Loading
-
-```html 
-<van-button loading />
-<van-button loading type="primary" />
-```
-
-#### Shape
-
-```html 
-<van-button type="danger" square>Square</van-button>
-<van-button type="danger" round>Round</van-button>
-```
-
 ### API

 | Attribute | Description | Type | Default |
--- a/packages/button/test/snapshots/demo.spec.js.snap
+++ b/packages/button/test/snapshots/demo.spec.js.snap
@ -4,40 +4,37 @@ exports[`renders demo correctly 1`] = `
 <div>
  <div>
    <div class="demo-button-row">
-      <button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button>
      <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button>
+      <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button>
    </div>
+    <button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button>
    <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
-    <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button>
  </div>
  <div>
-    <div class="demo-button-row">
-      <button class="van-button van-button--default van-button--normal van-button--plain"><span class="van-button__text">默认按钮</span></button>
-      <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">主要按钮</span></button>
-    </div>
-    <button class="van-button van-button--warning van-button--normal van-button--plain"><span class="van-button__text">警告按钮</span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">警告按钮</span></button>
    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">危险按钮</span></button>
  </div>
+  <div>
+    <button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
+    <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
+  </div>
+  <div>
+    <button class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
+      <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    </button>
+    <button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
+      <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    </button>
+  </div>
+  <div>
+    <button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button>
+    <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button>
+  </div>
  <div>
    <button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button>
    <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button>
    <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button>
    <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button>
  </div>
-  <div>
-    <button disabled="disabled" class="van-button van-button--default van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
-  </div>
-  <div>
-    <button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable">
-      <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    </button>
-    <button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
-      <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    </button>
-  </div>
-  <div>
-    <button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button>
-    <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button>
-  </div>
 </div>
 `;
--- a/packages/button/zh-CN.md
+++ b/packages/button/zh-CN.md
@ -22,10 +22,31 @@ Vue.use(Button);
 #### 朴素按钮

 ```html
-<van-button type="default" plain>默认按钮</van-button>
-<van-button type="primary" plain>主要按钮</van-button>
-<van-button type="warning" plain>警告按钮</van-button>
-<van-button type="danger" plain>危险按钮</van-button>
+<van-button plain type="primary">主要按钮</van-button>
+<van-button plain type="danger">危险按钮</van-button>
+```
+
+#### 禁用状态
+
+通过`disabled`属性来禁用按钮，此时按钮不可点击
+
+```html
+<van-button disabled type="primary">禁用状态</van-button>
+<van-button disabled type="danger">禁用状态</van-button>
+```
+
+#### 加载状态
+
+```html 
+<van-button loading type="primary" />
+<van-button loading type="danger" />
+```
+
+#### 按钮形状
+
+```html 
+<van-button square type="primary">方形按钮</van-button>
+<van-button round type="danger">圆形按钮</van-button>
 ```

 #### 按钮尺寸
@ -38,28 +59,6 @@ Vue.use(Button);
 <van-button size="mini">迷你按钮</van-button>
 ```

-#### 禁用状态
-
-通过`disabled`属性来禁用按钮，此时按钮不可点击
-
-```html
-<van-button disabled>禁用状态</van-button>
-```
-
-#### 加载状态
-
-```html 
-<van-button loading />
-<van-button loading type="primary" />
-```
-
-#### 按钮形状
-
-```html 
-<van-button type="danger" square>方形按钮</van-button>
-<van-button type="danger" round>圆形按钮</van-button>
-```
-

 ### API

--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@ -6,7 +6,7 @@
  display: inline-block;
  height: 44px;
  line-height: 42px;
-  border-radius: 3px;
+  border-radius: 2px;
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
@ -135,9 +135,7 @@
  }

  &--disabled {
-    color: $button-disabled-color;
-    background-color: $button-disabled-background-color;
-    border: 1px solid $button-disabled-border-color;
+    opacity: .5;
  }

  &--round {
--- a/packages/vant-css/src/common/var.css
+++ b/packages/vant-css/src/common/var.css
@ -3,7 +3,7 @@ $black: #000;
 $white: #fff;
 $red: #f44;
 $blue: #38f;
-$orange: #f85;
+$orange: #ff976a;
 $green: #06bf04;
 $gray: #c9c9c9;
 $gray-light: #e5e5e5;
@ -29,10 +29,7 @@ $button-danger-border-color: $red;
 $button-warning-color: $white;
 $button-warning-background-color: $orange;
 $button-warning-border-color: $orange;
-$button-disabled-color: $gray-dark;
-$button-disabled-background-color: $active-color;
-$button-disabled-border-color: $border-color;
 $button-bottom-action-default-color: $white;
-$button-bottom-action-default-background-color: #f85;
+$button-bottom-action-default-background-color: $orange;
 $button-bottom-action-primary-color: $white;
 $button-bottom-action-primary-background-color: $red;