Vue中封装一个骨架屏组件

最新推荐文章于 2024-07-25 14:07:12 发布

丹丹呀～～

最新推荐文章于 2024-07-25 14:07:12 发布

阅读量377

点赞数 2

文章标签： Vue.js 骨架屏组件封装动画效果用户体验

本文链接：https://blog.csdn.net/weixin_55690518/article/details/120310668

版权

骨架屏组件的目的：为了在加载过程中等待效果更好，封装一个骨架屏组件

封装一个组件，做占位使用，这个占位组件有个专业术语：骨架屏组件，暴露一些属性：高、宽、背景、是否有闪动画

skeleton.vue

<template>
  <div class="skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 闪效果 skeleton 伪元素 --->
  </div>
</template>
<script>
export default {
  name: 'Skeleton',
  // 使用的时候需要动态设置 高度，宽度，背景颜色，是否闪下
  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"