Little Red Riding Hood
—— —— —— — —— ————— ————— ——
# 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.
<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
# v-loading-preload Modifier
| Modifier | Description | Type |
|---|---|---|
| v-loading-preload.[number] | Specify the length of the placeholder when the type is text | Number |