[Feature Request] 使用非常方便的骨架屏解决方案

[98kWarning]

这个功能解决了什么问题

解决现有骨架屏使用麻烦，适用度低的问题

描述您想要的解决方案

使用时将需要显示的视图通过slot放入骨架屏组件内，然后给视图内的span、a、img等标签设置带动画的背景和透明字体色来让实现骨架屏效果，在通过props来控制是否显示骨架屏。对于某些也要有骨架效果的div标签，用v-slot="{ vClass }"回传一个vClass，把vClass设置给div，实现对div的单独控制

建议的API是什么样的

通过传一个props来控制是否显示骨架屏状态

效果

使用

<template>
  <div class="home col">
    <van-switch v-model="loading" />
    <skeleton :loading="loading" v-slot="{ vClass }">
      <div class="row-center item">
        <img class="img" src="../../assets/logo.png"/>
        <div class="col">
          <span class="title">这是一个标题</span>
          <span class="sub-title">这是一段内容</span>
        </div>
      </div>
      <div class="content" :class="[vClass]" style="width:100%;height:300px;">
        这是一个div
      </div>
    </skeleton>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,toRefs,inject } from 'vue';
import Skeleton from '@/components/skeleton'

export default defineComponent({
  name: 'About',
  components:{
    Skeleton
  },
  setup(){

    const updateTitle: (title: string)=>void|undefined = inject('setNavTitle')

    const state = reactive({
      loading:false
    })

    const setTitle = ()=>{
      updateTitle&&updateTitle('关于页面')
    }

    setTitle()

    return {
      ...toRefs(state)
    }
  }
});
</script>

<style scoped>

  .item{
    padding: 10px;
  }
  .title{
    font-size: .4rem;
  }
  .sub-title{
    margin-top: 5px;
    font-size: .35rem;
    color: #333;
  }

  .img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .content{
    padding: 10px;
    font-size: .38rem;
  }
</style>

我自己简单实现的代码

• Skeleton.tsx

import { defineComponent, computed } from 'vue';
import 'skeleton.css'
interface SkeletonProps {
    loading: boolean;
}

export default defineComponent({
    name: 'Skeleton',
    props: {
        loading: {
            type: Boolean,
            default: () => false
        }
    },
    setup(props: SkeletonProps, { slots }) {
        return () => {
            return (
                <div class={props.loading ? 'skeleton-view-empty-view' : 'skeleton-view-default-view'}>
                    {slots.default({
                        vClass: props.loading ? 'skeleton-view-empty-div' : 'skeleton-view-default-view'
                    })}
                </div>
            )
        }
    }
})

• skeleton.css

.skeleton-view-default-view span,
.skeleton-view-default-view a,
.skeleton-view-default-view img
{
    transition: all .7s ease;
    background-color: rgba(0, 0, 0, 0)
}


.skeleton-view-empty-div{
    color: rgba(0, 0, 0, 0) !important;
    border-radius: 2px;
    background: linear-gradient(
            -45deg,
            #F5F5F5 0%,
            #DCDCDC 25%,
            #F5F5F5 50%,
            #DCDCDC 75%,
            #F5F5F5 100%
    );
    animation: gradientBG 4s ease infinite;
    background-size: 400% 400%;
    background-color:#DCDCDC;
    transition: all 1s ease;
}

.skeleton-view-empty-view {
    pointer-events: none;
}
.skeleton-view-empty-view span,
.skeleton-view-empty-view a {
    color: rgba(0, 0, 0, 0) !important;
    border-radius: 2px;
    background: linear-gradient(
            -45deg,
            #F5F5F5 0%,
            #DCDCDC 25%,
            #F5F5F5 50%,
            #DCDCDC 75%,
            #F5F5F5 100%
    );
    animation: gradientBG 4s ease infinite;
    background-size: 400% 400%;
    background-color:#DCDCDC;
    transition: all 1s ease;
}
/* [src=""],img:not([src])*/
.skeleton-view-empty-view img {
    content: url(../../assets/img/no_url.png);
    border-radius: 2px;
    background: linear-gradient(
            -45deg,
            #F5F5F5 0%,
            #DCDCDC 25%,
            #F5F5F5 50%,
            #DCDCDC 75%,
            #F5F5F5 100%
    );
    animation: gradientBG 4s ease infinite;
    background-size: 400% 400%;
    background-color:#DCDCDC;
    transition: all 1s ease;
}
@keyframes gradientBG {
    0% {
        background-position: 100% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}