ant-design-vue/components/skeleton/demo/children.md

55 lines
1.0 KiB
Markdown
Raw Normal View History

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