代码改变世界
[登录 · 注册]
  • 骨架屏,加载中,loading
  • 目标:骨架屏,加载中,loading

    截图:

     样式:

    <style lang="stylus">
    /*每个页面公共css */
    .show-skeleton
      .skeleton
        position relative
      
      .skeleton:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 5px
      
      /*圆角*/
      
      .skeleton-radius
        position relative
      
      .skeleton-radius:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 50%
      
      /*矩形*/
      
      .skeleton-rect
        position relative
      
      .skeleton-rect:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
      
      /*圆角矩形 5 */
      
      .skeleton-rect-5
        position relative
      
      .skeleton-rect-5:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 5px
      
      /*圆角矩形 10 */
      
      .skeleton-rect-10
        position relative
      
      .skeleton-rect-10:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 10px
      
      /*圆角矩形 20 */
      
      .skeleton-rect-20
        position relative
      
      .skeleton-rect-20:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 20px
      
      /*圆角矩形 30 */
      
      .skeleton-rect-30
        position relative
      
      .skeleton-rect-30:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 30px
      
      /*圆角矩形 50 */
      
      .skeleton-rect-50
        position relative
      
      .skeleton-rect-50:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 50px
      
      /*圆角矩形 100 */
      
      .skeleton-rect-100
        position relative
      
      .skeleton-rect-100:after
        content ''
        position absolute
        top 0
        right 0
        bottom 0
        left 0
        background-color #ccc
        border-radius 100px
    
    
    </style>

    使用:

    <template>
      <div class="index" :class="{'show-skeleton':showSkeleton}">
        <!--搜索框-->
        <div class="search skeleton-rect-50">
          <div class="icon"></div>
          <div class="text">搜索框</div>
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import {Vue, Component, Prop, Watch} from "vue-property-decorator";
    
    @Component
    export default class index extends Vue {
      showSkeleton: boolean = true
      onLoad(e: any) {
        setTimeout(() => {
          this.showSkeleton = false
        }, 2000)
      }
    }
    </script>
    
    <style scoped lang="stylus">
    
    /*搜索框*/
    .search
      display flex
      justify-content flex-start
      align-items center
      margin 0 30px 30px
      background-color #eee
      padding 20px 30px
      border-radius 50px
      
      .icon
        width 30px
        height 30px
        overflow hidden
        display flex
        justify-content center
        align-items center
        background-color #999
        border-radius 3px
        margin 0 20px 0 5px
      
      .text
        color #999
    
    .index
      padding 0
      font-size 28px
    
    </style>

    本文链接:

    https://www.cnblogs.com/stumpx/p/13578198.html

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/stumpx/p/13578198.html
Copyright 2008-2020 晋ICP备12007731号-1