Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
fdeaa00b
提交
fdeaa00b
authored
10月 26, 2020
作者:
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add lazyContainer comp and demo
上级
a0c31974
全部展开
隐藏空白字符变更
内嵌
并排
正在显示
8 个修改的文件
包含
79 行增加
和
29 行删除
+79
-29
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+1
-0
index.ts
src/components/Container/index.ts
+1
-1
LazyContainer.less
src/components/Container/src/LazyContainer.less
+0
-27
LazyContainer.vue
src/components/Container/src/LazyContainer.vue
+0
-0
comp.ts
src/router/menus/modules/demo/comp.ts
+4
-0
comp.ts
src/router/routes/modules/demo/comp.ts
+8
-1
TargetContent.vue
src/views/demo/comp/lazy/TargetContent.vue
+19
-0
index.vue
src/views/demo/comp/lazy/index.vue
+46
-0
没有找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
fdeaa00b
...
...
@@ -8,6 +8,7 @@
-
表单新增 submitOnReset 控制是否在重置时重新发起请求
-
表格新增
`sortFn`
支持自定义排序
-
新增动画组件及示例
-
新增懒加载/延时加载组件及示例
### ✨ Refactor
...
...
src/components/Container/index.ts
浏览文件 @
fdeaa00b
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'
;
src/components/Container/src/LazyContainer.less
deleted
100644 → 0
浏览文件 @
a0c31974
.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;
}
src/components/Container/src/LazyContainer.
tsx
→
src/components/Container/src/LazyContainer.
vue
浏览文件 @
fdeaa00b
差异被折叠。
点击展开。
src/router/menus/modules/demo/comp.ts
浏览文件 @
fdeaa00b
...
...
@@ -49,6 +49,10 @@ const menu: MenuModule = {
name
:
'详情组件'
,
},
{
path
:
'lazy'
,
name
:
'懒加载组件'
,
},
{
path
:
'verify'
,
name
:
'验证组件'
,
children
:
[
...
...
src/router/routes/modules/demo/comp.ts
浏览文件 @
fdeaa00b
...
...
@@ -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'
,
...
...
src/views/demo/comp/lazy/TargetContent.vue
0 → 100644
浏览文件 @
fdeaa00b
<
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
>
src/views/demo/comp/lazy/index.vue
0 → 100644
浏览文件 @
fdeaa00b
<
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
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论