feat(Skeleton): add round prop (#6441)

src/skeleton/README.md

@@ -56,6 +56,7 @@ export default {
 | avatar | Whether to show avatar placeholder | _boolean_ | `false` |
 | loading | Whether to show skeleton，pass `false` to show child component | _boolean_ | `true` |
 | animate | Whether to enable animation | _boolean_ | `true` |
+| round `v2.8.5` | Whether to show round title and row | _boolean_ | `false` |
 | title-width | Title width | _number \| string_ | `40%` |
 | avatar-size | Size of avatar placeholder | _number \| string_ | `32px` |
 | avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` |

src/skeleton/README.zh-CN.md

@@ -60,8 +60,9 @@ export default {
 | row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \|<br>(number \| string)[]_ | `100%` |
 | title | 是否显示标题占位图 | _boolean_ | `false` |
 | avatar | 是否显示头像占位图 | _boolean_ | `false` |
-| loading | 是否显示骨架屏，传`false`时会展示子组件内容 | _boolean_ | `true` |
+| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` |
 | animate | 是否开启动画 | _boolean_ | `true` |
+| round `v2.8.5` | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` |
 | title-width | 标题占位图宽度 | _number \| string_ | `40%` |
 | avatar-size | 头像占位图大小 | _number \| string_ | `32px` |
 | avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` |

src/skeleton/index.less

@@ -10,7 +10,7 @@
     background-color: @skeleton-avatar-background-color;
 
     &--round {
-      border-radius: 100%;
+      border-radius: @border-radius-max;
     }
   }
 
@@ -46,6 +46,13 @@
     animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
       infinite;
   }
+
+  &--round {
+    .van-skeleton__row,
+    .van-skeleton__title {
+      border-radius: @border-radius-max;
+    }
+  }
 }
 
 @keyframes van-skeleton-blink {

src/skeleton/index.tsx

@@ -9,6 +9,7 @@ import { DefaultSlots } from '../utils/types';
 export type SkeletonProps = {
   row: number | string;
   title?: boolean;
+  round?: boolean;
   avatar?: boolean;
   loading: boolean;
   animate: boolean;
@@ -78,7 +79,10 @@ function Skeleton(
   }
 
   return (
-    <div class={bem({ animate: props.animate })} {...inherit(ctx)}>
+    <div
+      class={bem({ animate: props.animate, round: props.round })}
+      {...inherit(ctx)}
+    >
       {Avatar()}
       <div class={bem('content')}>
         {Title()}
@@ -90,6 +94,7 @@ function Skeleton(
 
 Skeleton.props = {
   title: Boolean,
+  round: Boolean,
   avatar: Boolean,
   row: {
     type: [Number, String],

src/skeleton/test/__snapshots__/index.spec.js.snap

@@ -17,6 +17,15 @@ exports[`disable animate 1`] = `
 
 exports[`render chidren 1`] = `<div>Content</div>`;
 
+exports[`round prop 1`] = `
+<div class="van-skeleton van-skeleton--animate van-skeleton--round">
+  <div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
+  <div class="van-skeleton__content">
+    <h3 class="van-skeleton__title" style="width: 40%;"></h3>
+  </div>
+</div>
+`;
+
 exports[`row-width array 1`] = `
 <div class="van-skeleton van-skeleton--animate">
   <div class="van-skeleton__content">

src/skeleton/test/index.spec.js

@@ -34,6 +34,17 @@ test('avatar shape', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('round prop', () => {
+  const wrapper = mount(Skeleton, {
+    propsData: {
+      title: true,
+      round: true,
+      avatar: true,
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('disable animate', () => {
   const wrapper = mount(Skeleton, {
     propsData: {