[Improvement] Loading: change default type to circular (#623)

2025-10-09 02:09:57 +08:00 · 2018-02-08 09:47:15 +08:00 · 2018-02-08 09:47:15 +08:00 · c11c0bb4c7
commit c11c0bb4c7
parent 2a3c75bc2f
14 changed files with 50 additions and 67 deletions
--- a/docs/demos/views/button.vue
+++ b/docs/demos/views/button.vue
@ -92,6 +92,10 @@ export default {
    &--normal {
      margin-right: 10px;
    }
+
+    .van-loading {
+      margin: 0 18px;
+    }
  }

  .van-doc-demo-block {
--- a/docs/demos/views/loading.vue
+++ b/docs/demos/views/loading.vue
@ -1,23 +1,18 @@
 <template>
  <demo-section>
    <demo-block :title="$t('title1')">
-      <van-loading type="circle" color="black" />
-      <van-loading type="circle" color="white" />
+      <van-loading color="black" />
+      <van-loading color="white" />
    </demo-block>

    <demo-block :title="$t('title2')">
-      <van-loading type="gradient-circle" color="black" />
-      <van-loading type="gradient-circle" color="white" />
-    </demo-block>
-
-    <demo-block :title="$t('title3')">
      <van-loading type="spinner" color="black" />
      <van-loading type="spinner" color="white" />
    </demo-block>

-    <demo-block :title="$t('title4')">
-      <van-loading type="circular" color="black" />
-      <van-loading type="circular" color="white" />
+    <demo-block :title="$t('title3')">
+      <van-loading type="circle" color="black" />
+      <van-loading type="circle" color="white" />
    </demo-block>
  </demo-section>
 </template>
@ -26,16 +21,14 @@
 export default {
  i18n: {
    'zh-CN': {
-      title1: '单色圆环',
-      title2: '渐变色圆环',
-      title3: 'Spinner',
-      title4: 'Circular'
+      title1: 'Circular',
+      title2: 'Spinner',
+      title3: 'Circle'
    },
    'en-US': {
-      title1: 'Solid Circle',
-      title2: 'Gradient Circle',
-      title3: 'Spinner',
-      title4: 'Circular'
+      title1: 'Circular',
+      title2: 'Spinner',
+      title3: 'Circle'
    }
  }
 };
--- a/docs/demos/views/toast.vue
+++ b/docs/demos/views/toast.vue
@ -23,6 +23,7 @@
 export default {
  i18n: {
    'zh-CN': {
+      loading: '加载中',
      title1: '文字提示',
      title2: '加载提示',
      title3: '成功/失败提示',
@ -52,7 +53,7 @@ export default {
    },

    showLoadingToast() {
-      Toast.loading({ mask: true });
+      Toast.loading({ mask: true, message: this.$t('loading') + '...' });
    },

    showSuccessToast() {
--- a/docs/markdown/en-US/loading.md
+++ b/docs/markdown/en-US/loading.md
@ -9,18 +9,11 @@ Vue.use(Loading);

 ### Usage

-#### Solid Circle
+#### Circular

 ```html
-<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white" />
-```
-
-#### Gradient Circle
-
-```html
-<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white" />
+<van-loading color="black" />
+<van-loading color="white" />
 ```

 #### Spinner
@ -30,11 +23,11 @@ Vue.use(Loading);
 <van-loading type="spinner" color="white" />
 ```

-#### Circular
+#### Circle

 ```html
-<van-loading type="circular" color="black" />
-<van-loading type="circular" color="white" />
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```

 ### API
@ -42,5 +35,5 @@ Vue.use(Loading);
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | color | Color | `String` | `black` | `black` `white` |
-| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
+| type | Type | `String` | `circular` | `spinner` `circle` |
 | size | Size | `String` | `30px` | - |
--- a/docs/markdown/en-US/toast.md
+++ b/docs/markdown/en-US/toast.md
@ -18,7 +18,10 @@ Toast('Some messages');
 #### Loading

 ```javascript
-Toast.loading({ mask: true });
+Toast.loading({
+  mask: true,
+  message: 'Loading...'
+});
 ```


--- a/docs/markdown/zh-CN/loading.md
+++ b/docs/markdown/zh-CN/loading.md
@ -9,18 +9,11 @@ Vue.use(Loading);

 ### 代码演示

-#### 单色圆环
+#### Circular

 ```html
-<van-loading type="circle" color="black" />
-<van-loading type="circle" color="white" />
-```
-
-#### 渐变色圆环
-
-```html
-<van-loading type="gradient-circle" color="black" />
-<van-loading type="gradient-circle" color="white" />
+<van-loading color="black" />
+<van-loading color="white" />
 ```

 #### Spinner
@ -30,11 +23,11 @@ Vue.use(Loading);
 <van-loading type="spinner" color="white" />
 ```

-#### Circular
+#### Circle

 ```html
-<van-loading type="circular" color="black" />
-<van-loading type="circular" color="white" />
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
 ```

 ### API
@ -42,5 +35,5 @@ Vue.use(Loading);
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | color | 颜色 | `String` | `black` | `black` `white` |
-| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
+| type | 类型 | `String` | `circular` | `spinner` `circle` |
 | size | 大小 | `String` | `30px` | - |
--- a/docs/markdown/zh-CN/toast.md
+++ b/docs/markdown/zh-CN/toast.md
@ -18,7 +18,10 @@ Toast('我是提示文案，建议不超过十五字~');
 #### 加载提示

 ```javascript
-Toast.loading({ mask: true });
+Toast.loading({
+  mask: true,
+  message: '加载中...'
+});
 ```


--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@ -17,7 +17,7 @@
            <span class="van-actionsheet__name">{{ item.name }}</span>
            <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
          </template>
-          <loading v-else class="van-actionsheet__loading" type="circle" />
+          <loading v-else class="van-actionsheet__loading" size="20px" />
        </li>
      </ul>
      <div
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@ -16,12 +16,7 @@
    ]"
    @click="onClick"
  >
-    <loading
-      v-if="loading"
-      class="van-button__icon-loading"
-      type="circle"
-      :color="type === 'default' ? 'black' : 'white'"
-    />
+    <loading v-if="loading" size="20px" :color="type === 'default' ? 'black' : 'white'" />
    <span class="van-button__text">
      <slot>{{ text }}</slot>
    </span>
--- a/packages/loading/index.vue
+++ b/packages/loading/index.vue
@ -21,7 +21,7 @@ export default {
    size: String,
    type: {
      type: String,
-      default: 'gradient-circle'
+      default: 'circular'
    },
    color: {
      type: String,
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@ -8,7 +8,7 @@
      </slot>
    </div>
    <div v-if="loading" class="van-picker__loading">
-      <loading type="circular" />
+      <loading />
    </div>
    <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
      <picker-column
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@ -10,7 +10,7 @@
        <template v-if="displayStyle === 'default'">
          <loading v-if="type === 'loading'" color="white" />
          <icon v-else class="van-toast__icon" :name="type" />
-          <div v-if="message !== undefined" class="van-toast__text">{{ message }}</div>
+          <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
        </template>
      </div>
      <div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
@ -49,6 +49,10 @@ export default create({
  computed: {
    displayStyle() {
      return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
+    },
+
+    hasMessage() {
+      return this.message || this.message === 0;
    }
  }
 });
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@ -31,10 +31,6 @@
    opacity: .3;
  }

-  &__icon-loading {
-    display: inline-block;
-  }
-
  &--default {
    color: $button-default-color;
    background-color: $button-default-background-color;
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@ -30,13 +30,11 @@
  }

  &__loading {
+    top: 50%;
+    left: 50%;
    width: 16px;
    height: 16px;
-    position: relative;
-    left: 50%;
-    top: 50%;
    transform: translate3d(-50%, -50%, 0);
-    margin: 0;
  }

  &--on {