# Skeleton

Placeholder style displayed at load, supporting three forms of placeholder expression

v-loading-preload is especially suitable for article and image loading, but limited to Ajax technology

# Basic usage

use v-loading-preload Instruction for placeholder

We can specify data-loading-text to control the length of the placeholder displayed when loading.
    <h1 v-loading-preload="visible[0]" data-loading-text="2">{{ title }}</h1>
    <div class="content" v-loading-preload="visible[1]" data-loading-text="16">{{ content }}</div>

  export default {
    data() {
      return {
        title: '',
        content: '',
        visible: [false, false]
    methods: {
      promise(ms, data) {
        return new Promise(resolve => {
          setTimeout(() => {
          }, ms)
      async task() {
        this.title = await this.promise(1600, 'Little Red Riding Hood');
        this.$set(this.visible, 0, true);
        this.content = await this.promise(1800, 'Once upon a time there was a sweet little girl.' +
          ' Everyone who saw her liked her, but most of all her grandmother, ' +
          'who did not know what to give the child next. ' +
          'Once she gave her a little cap made of red velvet. Because it suited her so well, ' +
          'and she wanted to wear it all the time, ' +
          'she came to be known as Little Red Riding Hood.');
        this.$set(this.visible, 1, true);
    mounted() {

# Directive modifier

You can use the . (dot) operator after the command, followed by a number, which makes it easier and more beautiful to control the length of the placeholder, and also solves the problem that dataset does not exist in IE.

    <h1 v-loading-preload.4="visible[0]">{{ title }}</h1>
    <div class="content" v-loading-preload.24="visible[1]">{{ content }}</div>

# Placeholder

Placeholders can be provided in three different types to achieve the effect of loading different resources, such as images can use data-loading-type.

Note: If you use a non-text type placeholder you can specify the size of the placeholder data-loading-diameter
    <i v-loading-preload="visible[0]" data-loading-type="circle" class="fab icon" :class="title"></i>
    <i v-loading-preload="visible[1]" data-loading-type="rect" data-loading-diameter="36"
       style="font-size: 36px" class="fab icon" :class="content"></i>

# Options

Attributes Description Type Defaults
data-loading-text Control the number of display of placeholders (text) Number / String 1
data-loading-type Control the style of placeholders String text
data-loading-diameter Control the size of the placeholder, Invalid when type is text Number / String -

# v-loading-preload Modifier

Modifier Description Type
v-loading-preload.[number] Specify the length of the placeholder when the type is text Number