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