提交 fdeaa00b 作者: vben

feat: add lazyContainer comp and demo

上级 a0c31974
......@@ -8,6 +8,7 @@
- 表单新增 submitOnReset 控制是否在重置时重新发起请求
- 表格新增`sortFn`支持自定义排序
- 新增动画组件及示例
- 新增懒加载/延时加载组件及示例
### ✨ Refactor
......
export { default as ScrollContainer } from './src/ScrollContainer.vue';
export { default as CollapseContainer } from './src/collapse/CollapseContainer.vue';
export { default as LazyContainer } from './src/LazyContainer';
export { default as LazyContainer } from './src/LazyContainer.vue';
export * from './src/types.d';
.lazy-container-enter {
opacity: 0;
}
.lazy-container-enter-to {
opacity: 1;
}
.lazy-container-enter-from,
.lazy-container-enter-active {
position: absolute;
top: 0;
width: 100%;
transition: opacity 0.3s 0.2s;
}
.lazy-container-leave {
opacity: 1;
}
.lazy-container-leave-to {
opacity: 0;
}
.lazy-container-leave-active {
transition: opacity 0.5s;
}
......@@ -49,6 +49,10 @@ const menu: MenuModule = {
name: '详情组件',
},
{
path: 'lazy',
name: '懒加载组件',
},
{
path: 'verify',
name: '验证组件',
children: [
......
......@@ -99,7 +99,14 @@ export default {
title: '详情组件',
},
},
{
path: '/lazy',
name: 'lazyDemo',
component: () => import('/@/views/demo/comp/lazy/index.vue'),
meta: {
title: '懒加载组件',
},
},
{
path: '/verify',
name: 'VerifyDemo',
......
<template>
<Card hoverable :style="{ width: '240px', background: '#fff' }">
<template #cover>
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
</template>
<CardMeta title="懒加载组件" />
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue';
export default defineComponent({
components: { CardMeta: Card.Meta, Card },
setup() {
return {};
},
});
</script>
<template>
<div class="p-4 lazy-base-demo">
<Alert message="基础示例" description="向下滚动到可见区域才会加载组件" type="info" show-icon />
<div class="lazy-base-demo-wrap">
<h1>向下滚动</h1>
<LazyContainer @init="() => {}">
<TargetContent />
<template #skeleton>
<Skeleton :rows="10" />
</template>
</LazyContainer>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Skeleton, Alert } from 'ant-design-vue';
import TargetContent from './TargetContent.vue';
import { LazyContainer } from '/@/components/Container/index';
export default defineComponent({
components: { LazyContainer, TargetContent, Skeleton, Alert },
setup() {
return {};
},
});
</script>
<style lang="less" scoped>
.lazy-base-demo {
&-wrap {
display: flex;
width: 50%;
height: 2000px;
margin: 20px auto;
text-align: center;
background: #fff;
justify-content: center;
flex-direction: column;
align-items: center;
}
h1 {
height: 1300px;
margin: 20px 0;
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论