From 86ec5475af3d98e523cb1ddf81b42f830e9b4d82 Mon Sep 17 00:00:00 2001 From: BeADre Date: Tue, 1 Dec 2020 23:00:31 +0800 Subject: [PATCH] fix(loading): remove text --- packages/varlet-ui/src/loading/Loading.vue | 11 +---- packages/varlet-ui/src/loading/docs/en_US.md | 31 +++---------- packages/varlet-ui/src/loading/docs/zh_CN.md | 31 +++---------- .../varlet-ui/src/loading/example/index.vue | 26 ----------- packages/varlet-ui/src/loading/loading.less | 44 +++++++++---------- packages/varlet-ui/src/loading/propsEmits.ts | 15 ------- 6 files changed, 32 insertions(+), 126 deletions(-) diff --git a/packages/varlet-ui/src/loading/Loading.vue b/packages/varlet-ui/src/loading/Loading.vue index 1976ec2d91b..cd9e0574dbe 100644 --- a/packages/varlet-ui/src/loading/Loading.vue +++ b/packages/varlet-ui/src/loading/Loading.vue @@ -1,8 +1,5 @@ diff --git a/packages/varlet-ui/src/loading/docs/en_US.md b/packages/varlet-ui/src/loading/docs/en_US.md index 3143143cbcf..79fabff9c53 100644 --- a/packages/varlet-ui/src/loading/docs/en_US.md +++ b/packages/varlet-ui/src/loading/docs/en_US.md @@ -30,36 +30,15 @@ export default defineComponent({ ``` -### Text - -```html -loading -loading -loading -loading -``` - -### Horizontal - -```html -loading -loading -loading -loading -``` - ## API ### Props -| Attribute | Description | Type | Default | -| --------- | ---------------------------------------------------- | --------- | --------- | -| color | Loading color | _string_ | `#00BCD4` | -| type | Can be set to `wave` `cube` `rect` `disappear` | _string_ | `wave` | -| size | Can be set to `large` `normal` `small` `mini` | _string_ | `normal` | -| fontColor | Text color | _string_ | `#ccc` | -| fontSize | Text font size | _number_ | `14` | -| vertical | Whether to arrange icons and text content vertically | _boolean_ | `true` | +| Attribute | Description | Type | Default | +| --------- | ---------------------------------------------- | -------- | --------- | +| color | Loading color | _string_ | `#00BCD4` | +| type | Can be set to `wave` `cube` `rect` `disappear` | _string_ | `wave` | +| size | Can be set to `large` `normal` `small` `mini` | _string_ | `normal` | ### Slots diff --git a/packages/varlet-ui/src/loading/docs/zh_CN.md b/packages/varlet-ui/src/loading/docs/zh_CN.md index a6dde3c742b..70952c37f76 100644 --- a/packages/varlet-ui/src/loading/docs/zh_CN.md +++ b/packages/varlet-ui/src/loading/docs/zh_CN.md @@ -30,36 +30,15 @@ export default defineComponent({ ``` -### Loading 文本 - -```html -加载中 -加载中 -加载中 -加载中 -``` - -### 水平排列 - -```html -加载中 -加载中 -加载中 -加载中 -``` - ## API ### 属性 -| 参数 | 说明 | 类型 | 默认值 | -| --------- | --------------------------------------------------------- | --------- | --------- | -| color | loading 的颜色 | _string_ | `#00BCD4` | -| type | loading 的类型，可选值为 `wave` `cube` `rect` `disappear` | _string_ | `wave` | -| size | loading 的大小，可选值位 `large` `normal` `small` `mini` | _string_ | `normal` | -| fontColor | 文字颜色 | _string_ | `#ccc` | -| fontSize | 字体大小 | _number_ | `14` | -| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ----- | --------------------------------------------------------- | -------- | --------- | +| color | loading 的颜色 | _string_ | `#00BCD4` | +| type | loading 的类型，可选值为 `wave` `cube` `rect` `disappear` | _string_ | `wave` | +| size | loading 的大小，可选值位 `large` `normal` `small` `mini` | _string_ | `normal` | ### Slots diff --git a/packages/varlet-ui/src/loading/example/index.vue b/packages/varlet-ui/src/loading/example/index.vue index 71e479f303b..fa9d22fe4fa 100644 --- a/packages/varlet-ui/src/loading/example/index.vue +++ b/packages/varlet-ui/src/loading/example/index.vue @@ -18,32 +18,6 @@ -
- Text -
- 加载中 - 加载中 - 加载中 - 加载中 -
-
-
- Horizontal -
- - 加载中 - - - 加载中 - - - 加载中 - - - 加载中 - -
-
diff --git a/packages/varlet-ui/src/loading/loading.less b/packages/varlet-ui/src/loading/loading.less index 9d7b12214d4..461176c9963 100644 --- a/packages/varlet-ui/src/loading/loading.less +++ b/packages/varlet-ui/src/loading/loading.less @@ -18,10 +18,12 @@ align-items: center; &__wave { - @loading-cube-size-item-width: 5px; - @loading-cube-size-item-margin: 5px; + @loading-wave-size-item-width: 5px; + @loading-wave-size-item-margin: 5px; - text-align: center; + display: flex; + align-items: center; + justify-content: center; &-large { width: @loading-large-width; @@ -71,24 +73,24 @@ } &-item-large { - width: @loading-cube-size-item-width; - margin-left: @loading-cube-size-item-margin; + width: @loading-wave-size-item-width; + margin-left: @loading-wave-size-item-margin; } &-item-normal { - width: @loading-cube-size-item-width - 1; - margin-left: @loading-cube-size-item-margin - 1; + width: @loading-wave-size-item-width - 1; + margin-left: @loading-wave-size-item-margin - 1; } &-item-small { - width: @loading-cube-size-item-width - 2; - margin-left: @loading-cube-size-item-margin - 2; + width: @loading-wave-size-item-width - 2; + margin-left: @loading-wave-size-item-margin - 2; } &-item-mini { - width: @loading-cube-size-item-width - 3; - margin-left: @loading-cube-size-item-margin - 3; + width: @loading-wave-size-item-width - 3; + margin-left: @loading-wave-size-item-margin - 3; } @keyframes wave { @@ -103,8 +105,8 @@ } &__cube { - @loading-cube-size-item-width: 14px; - @loading-cube-size-item-height: 14px; + @loading-cube-size-item-width: 10px; + @loading-cube-size-item-height: 10px; @loading-cube-size-item-margin: 5px; display: flex; @@ -161,21 +163,21 @@ } &-item-normal { - height: @loading-cube-size-item-height - 3; - width: @loading-cube-size-item-width - 3; + height: @loading-cube-size-item-height - 2; + width: @loading-cube-size-item-width - 2; margin-left: @loading-cube-size-item-margin - 1; } &-item-small { - height: @loading-cube-size-item-height - 6; - width: @loading-cube-size-item-width - 6; + height: @loading-cube-size-item-height - 4; + width: @loading-cube-size-item-width - 4; margin-left: @loading-cube-size-item-margin - 2; } &-item-mini { - height: @loading-cube-size-item-height - 9; - width: @loading-cube-size-item-width - 9; + height: @loading-cube-size-item-height - 6; + width: @loading-cube-size-item-width - 6; margin-left: @loading-cube-size-item-margin - 3; } @@ -373,8 +375,4 @@ } } } - - &__text { - margin: 5px; - } } diff --git a/packages/varlet-ui/src/loading/propsEmits.ts b/packages/varlet-ui/src/loading/propsEmits.ts index 85e91629bff..e20eceaa3d5 100644 --- a/packages/varlet-ui/src/loading/propsEmits.ts +++ b/packages/varlet-ui/src/loading/propsEmits.ts @@ -31,19 +31,4 @@ export const props = { type: String, default: 'currentColor', }, - // 文字颜色 - fontColor: { - type: String, - default: '#ccc', - }, - // 字体大小 - fontSize: { - type: Number, - default: 14, - }, - // 是否垂直排列图标和文字内容 - vertical: { - type: Boolean, - default: true, - }, }