vue 骨架屏组件_关于骨架屏幕加载玩具砖的Vue组件

vue 骨架屏组件

TB骨架 (tb-skeleton)

a vue component about toy bricks of skeleton screen loading.

关于骨架屏幕加载的玩具积木的vue组件。

View demo 查看演示 Page Demo 页面演示

安装 (install)

$ npm i tb-skeleton -s

使用npm (use npm)

import Vue from 'Vue'
  import skeleton from 'tb-skeleton'
  import  'tb-skeleton/dist/skeleton.css'
  Vue.use(skeleton)

使用cdn (use cdn)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tb-skeleton.js"></script>
<link ref="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/skeleton.css"></script>

现场例子 (live example)

simple demo, page demo

简单演示 ， 页面演示

开始 (start)

<template>
  <div width="20%">
    <tb-skeleton :aspect-ratio="1" :theme="opacity" :shape="circle"></tb-skeleton>
  </div>
</template>
<script>
</script>

使用骨架 (use skeleton)

use skeleton component, you can set common props

使用骨架组件，可以设置通用道具

<template>
  <div>
    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" :bg-color="#eee"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
   </skeleton>
  </div>
</template>
<script>
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }
</script>

使用网格布局 (use grid layout)

about grid layout,please see simple-grid

关于网格布局，请参阅简单网格

<template>
<skeleton theme="opacity" style="width:200px" shape="radius">
    <row>
      <col :span="8">
        <tb-skeleton :aspect-ratio="1" shape="circle">
        </tb-skeleton>
      </col>
      <col :span="16">
        <row>
          <col :span="12" style="padding-left: 10px;margin-top: 5px">
            <tb-skeleton :aspect-ratio="0.2"></tb-skeleton>
          </col>
          <col :span="24" style="padding-left: 10px;margin-top: 10px">
            <tb-skeleton :aspect-ratio="0.1"></tb-skeleton>
          </col>
          <col :span="24" style="padding-left: 10px;margin-top: 10px">
            <tb-skeleton :aspect-ratio="0.1"></tb-skeleton>
          </col>
        </row>
      </col>
    </row>
  </skeleton>
</template>
<script>
  import {Col,Row} from 'simple-grid'
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      tb-skeleton,
      skeleton,
      Col,
      Row
    }
  }
</script>

骨架组件 (skeleton Component)

道具 (props)

param	description	type	default
theme	opacity,gradient,flex-outer,flex-inner, normal	String	normal
shape	tb-skeleton shape, circle、rect、radius	String
bgColor	tb-skeleton background-color	String
duration	tb-skeleton animation duration	String,Number

参数	描述	类型	默认
主题	opacity ， gradient ， flex-outer flex-inner ， normal	串	正常
形状	tb骨架形状， circle ， rect ， radius	串
bgColor	tb骨架背景色	串
持续时间	TB骨骼动画持续时间	字符串，数字

tb骨架组件 (tb-skeleton Component)

道具 (props)

param	description	type	default
theme	the same as skeleton theme	String	normal
shape	the same as skeleton shape	String	rect
bgColor	the same as skeleton bgColor	String	#dcdcdc
aspectRatio	ratio about width,height	Number	1
height	the tb-skeleton height	Number,String
width	the tb-skeleton width	Number,String	100%
duration	the tb-skeleton animation duration	String,Number

参数	描述	类型	默认
主题	与骨架主题相同	串	正常
形状	与骨架形状相同	串	直肠
bgColor	与骨骼bgColor相同	串	#dcdcdc
AspectRatio	宽高比	数	1个
高度	tb骨架高度	数字，字符串
宽度	tb骨架宽度	数字，字符串	100％
持续时间	tb骨骼动画的持续时间	字符串，数字

翻译自: https://vuejsexamples.com/a-vue-component-about-toy-bricks-of-skeleton-screen-loading/

vue 骨架屏组件