v-easy-components

# 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

Little Red Riding Hood

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.
We can specify data-loading-text to control the length of the placeholder displayed when loading.
<template>
  <article>
    <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>
  </article>
</template>

<script>
  export default {
    data() {
      return {
        title: '',
        content: '',
        visible: [false, false]
      }
    },
    methods: {
      promise(ms, data) {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve(data)
          }, 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() {
      this.task()
    }
  }
</script>

# 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.

Cinderella

There was once a rich man whose wife lay sick, and when she felt her end drawing near she called to her only daughter to come near her bed, and said, "Dear child, be pious and good, and God will always take care of you, and I will look down upon you from heaven, and will be with you." And then she closed her eyes and expired. The maiden went every day to her mother's grave and wept, and was always pious and good. When the winter came the snow covered the grave with a white covering, and when the sun came in the early spring and melted it away, the man took to himself another wife
<template>
  <article>
    <h1 v-loading-preload.4="visible[0]">{{ title }}</h1>
    <div class="content" v-loading-preload.24="visible[1]">{{ content }}</div>
  </article>
</template>

# 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
<template>
  <article>
    <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>
  </article>
</template>

# 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

← Picture Reader →