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.

—— ——

—— —— —— — —— ————— ————— —— — ——— ——— ————— 
<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 →