diff --git a/components/skeleton/__tests__/index.test.js b/components/skeleton/__tests__/index.test.js
index 173ae4295..592c0d875 100644
--- a/components/skeleton/__tests__/index.test.js
+++ b/components/skeleton/__tests__/index.test.js
@@ -1,6 +1,7 @@
import { mount } from '@vue/test-utils';
import { asyncExpect } from '@/tests/utils';
import Skeleton from '..';
+import mountTest from '../../../tests/shared/mountTest';
describe('Skeleton', () => {
const genSkeleton = props => {
@@ -16,7 +17,7 @@ describe('Skeleton', () => {
};
return mount(Skeleton, skeletonProps);
};
-
+ mountTest(Skeleton);
describe('avatar', () => {
it('size', async () => {
const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });
@@ -35,6 +36,12 @@ describe('Skeleton', () => {
await asyncExpect(() => {
expect(wrapperLarge.html()).toMatchSnapshot();
});
+
+ const wrapperNumber = genSkeleton({ avatar: { size: 20 } });
+
+ await asyncExpect(() => {
+ expect(wrapperNumber.html()).toMatchSnapshot();
+ });
});
it('shape', async () => {
diff --git a/components/skeleton/demo/index.vue b/components/skeleton/demo/index.vue
index 65c6d185f..5e3692aad 100644
--- a/components/skeleton/demo/index.vue
+++ b/components/skeleton/demo/index.vue
@@ -14,17 +14,23 @@ const md = {
## 何时使用
- - 网络较慢，需要长时间等待加载处理的情况下。
- - 图文信息内容较多的列表/卡片中。
+- 网络较慢，需要长时间等待加载处理的情况下。
+- 图文信息内容较多的列表/卡片中。
+- 只在第一次加载数据的时候使用。
+- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
+
## 代码演示`,
us: `# Skeleton
- Provide a placeholder at the place which need waiting for loading.
+ Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
- # When To Use
+## When To Use
+
+- When a resource needs long time to load.
+- When the component contains lots of information, such as List or Card.
+- Only works when loading data for the first time.
+- Could be replaced by Spin in any situation, but can provide a better user experience.
- - When resource needs long time to load, like low network speed.
- - The component contains much information. Such as List or Card.
## Examples
`,
};
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index 9db28782b..6227c7425 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -12,10 +12,10 @@
### SkeletonAvatarProps
-| Property | Description | Type | Default |
-| -------- | ----------------------- | ----------------------------------- | ------- |
-| size | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
-| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
+| Property | Description | Type | Default |
+| -------- | ----------------------- | --------------------------------------------- | ------- |
+| size | Set the size of avatar | number \| Enum{ 'large', 'small', 'default' } | - |
+| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
### SkeletonTitleProps
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
index 123d8a4bb..396643d45 100644
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@@ -12,10 +12,10 @@
### SkeletonAvatarProps
-| 属性 | 说明 | 类型 | 默认值 |
-| ----- | -------------------- | ----------------------------------- | ------ |
-| size | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
-| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
+| 属性 | 说明 | 类型 | 默认值 |
+| ----- | -------------------- | --------------------------------------------- | ------ |
+| size | 设置头像占位图的大小 | number \| Enum{ 'large', 'small', 'default' } | - |
+| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
### SkeletonTitleProps
diff --git a/types/skeleton.d.ts b/types/skeleton.d.ts
index 9ae411a41..0e485617b 100644
--- a/types/skeleton.d.ts
+++ b/types/skeleton.d.ts
@@ -5,7 +5,7 @@
import { AntdComponent } from './component';
export interface SkeletonAvatarProps {
- size?: 'large' | 'small' | 'default';
+ size?: 'large' | 'small' | 'default' | number;
shape?: 'circle' | 'square';
}