2018-12-10 03:34:51 +00:00
|
|
|
<cn>
|
|
|
|
#### 包含子组件
|
|
|
|
加载占位图包含子组件。
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
<us>
|
|
|
|
#### Contains sub component
|
|
|
|
Skeleton contains sub component.
|
|
|
|
</us>
|
|
|
|
|
2019-10-09 10:32:23 +00:00
|
|
|
```tpl
|
2018-12-10 03:34:51 +00:00
|
|
|
<template>
|
|
|
|
<div class="article">
|
|
|
|
<a-skeleton :loading="loading">
|
|
|
|
<div>
|
|
|
|
<h4>Ant Design Vue, a design language</h4>
|
2019-09-28 12:45:07 +00:00
|
|
|
<p>
|
|
|
|
We supply a series of design principles, practical patterns and high quality design
|
|
|
|
resources (Sketch and Axure), to help people create their product prototypes beautifully
|
|
|
|
and efficiently.
|
|
|
|
</p>
|
2018-12-10 03:34:51 +00:00
|
|
|
</div>
|
|
|
|
</a-skeleton>
|
|
|
|
<a-button @click="showSkeleton" :disabled="loading">
|
|
|
|
Show Skeleton
|
|
|
|
</a-button>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
loading: false,
|
2019-09-28 12:45:07 +00:00
|
|
|
};
|
2018-12-10 03:34:51 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
showSkeleton() {
|
2019-09-28 12:45:07 +00:00
|
|
|
this.loading = true;
|
2018-12-10 03:34:51 +00:00
|
|
|
setTimeout(() => {
|
2019-09-28 12:45:07 +00:00
|
|
|
this.loading = false;
|
2018-12-10 03:34:51 +00:00
|
|
|
}, 3000);
|
2019-09-28 12:45:07 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
2018-12-10 03:34:51 +00:00
|
|
|
</script>
|
|
|
|
<style>
|
2019-09-28 12:45:07 +00:00
|
|
|
.article h4 {
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
.article button {
|
|
|
|
margin-top: 16px;
|
|
|
|
}
|
2018-12-10 03:34:51 +00:00
|
|
|
</style>
|
|
|
|
```
|