
<style lang="less">
@import './index.less';
</style>

<template>
  <van-skeleton
    :row="row"
    :row-width="rowWidth"
    :title="title"
    :title-width="titleWidth"
    :avatar="avatar"
    :avatar-shape="avatarShape"
    :avatar-size="avatarSize"
    :loading="loading"
    :animate="animate"
    :class="classes"
  >
    <slot />
  </van-skeleton>
</template>

<script>
import { skeletonProps } from './props';
import { Skeleton } from 'vant';

const prefixCls = 'yp-skeleton';

export default {
  name: 'skeleton',
  components: {
    VanSkeleton: Skeleton
  },

  props: {

    ...skeletonProps

    // ------------------  扩展 --------------- //
  },
  computed: {
    classes () {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}--${this.align}`]: this.align
        }
      ];
    }
  }
};
</script>
