首页 > 其他分享> 文章详细

vue项目中使用骨架屏组件

2021-07-17 23:57:32 阅读：196 来源： 互联网

标签：vue name default 100% 骨架 XtxSkeleton 组件 app 255

什么是骨架屏？可以理解为搭建楼房的架子

使用场景

下面是导航和商品的数据，一开始打开页面的时候肯定是ajax请求数据渲染出来的

但是呢一打开就是空空的一片，影响用户的体验这时候就用到了骨架屏，骨架屏是什么样的呢？

在没请求回来数据时，应该先把骨架给用户看告诉用户数据马上要回来啦，让用户不会什么页看不到，以为自己电脑卡了重新刷新页面，

接下来手动一个骨架屏

<template>
  <div class="xtx-skeleton shan" :style="{width:'100px',height:'50px'}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:'black'}"></div>
    <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  </div>
</template>
<script>
export default {
  name: 'Skeleton'
}
</script>
<style scoped lang="less">
.xtx-skeleton {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  .block {
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
}
.shan {
  &::after {
    content: "";
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>

效果图有一个动画过渡的效果

上面的宽高颜色都是固定死的，我们每次复用肯定不能给值写死，肯定为了复用组件，我们去给他传大小颜色

修改一下通过传值进行渲染数据

<template>
  <div class="xtx-skeleton shan" :style="{width:width,height:height}">
    <!-- 1 盒子-->
    <div class="block" :style="{backgroundColor:background}"></div>
    <!-- 2 闪效果 xtx-skeleton 伪元素 --->
  </div>
</template>
<script>
export default {
  name: 'XtxSkeleton',
  props: {
    width: {
      default: '30px',
      type: String
    },
    height: {
      default: '30px',
      type: String
    },
    background: {
      default: 'black',
      type: String
    }
  }
}
</script>

使用组件时传固定的值就好了

   <XtxSkeleton width="100px" height="100px" background="blue" />

效果图

接下来就可以在项目中使用了

vue3全局注册组件

vue3和vue2注册全局组件没什么区别就是install的参数不同

vue2参数是app vue3是app 当前只要参数一样写啥都行知道是vue实例就行了，只不过写app更明白是vue3的写法

import XtxSkeleton from '@/components/XtxSkeleton.vue'
export default {
  install (app) {
    app.component(XtxSkeleton.name, XtxSkeleton)
  }
}

在组件中使用

    <ul class="menu" v-if="$store.state.category.list.length > 0">
      <li
        :class="{active:item.id===id}"
        v-for="item in categoryList"
        :key="item.id"
        @mouseenter="id = item.id"
      >
        <RouterLink to="/"> {{ item.name }} </RouterLink>
        <template v-if="item.children">
          <RouterLink
            v-for="sub in item.children.slice(0, 2)"
            :key="sub.id"
            to="/"
          >
            {{ sub.name }}
          </RouterLink>
        </template>
      </li>
    </ul>

       <ul class="menu" v-else>
      <li v-for="(item,idx) in 10" :key="idx">
          <XtxSkeleton style="margin-right:10px" width="50px" height="25px" background="#3d3c3b"></XtxSkeleton>
          <XtxSkeleton style="margin-right:10px" width="50px" height="25px" background="#3d3c3b"></XtxSkeleton>
          <XtxSkeleton style="margin-right:10px" width="50px" height="25px" background="#3d3c3b"></XtxSkeleton>
      </li>
    </ul>

实现效果图

标签：vue,name,default,100%,骨架,XtxSkeleton,组件,app,255
来源： https://blog.csdn.net/m0_46846526/article/details/118864086

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue项目中使用骨架屏组件

接下来手动一个骨架屏

vue3全局注册组件