Vue前台项目 手动封装骨架屏组件

骨架屏组件

• 很多时候在页面数据没获取出来时候页面是白屏效果 这时候我们可以用骨架屏来设置一个效果,这样之后数据拿到的时候v-if可以替换骨架屏 会给用户比较好的体验感

• 骨架屏组件暴露的一些属性有:：高，宽，背景，是否有闪动画。
• 思路:封装一个骨架屏组件 里面动态封装需要的样式 动画等,让其在全局注册,需要的地方直接使用
• 已上面的效果举例

<template>
  <div class="xtx-skeleton" :style="{ width, height, backgroundColor: bg }" :class="{ shan: animated }"></div>
</template>
<script>
export default {
  name: 'XtxSkeleton',
  // 使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下
  props: {
    bg: {
      type: String,
      default: '#efefef'
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    animated: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="less">
  ...自己设置需要的样式
</style>

• 使用的时候

 <XtxSkeleton width="60px" height="18px" bg="rgba(255,255,255,0.2)" />