Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ChenSun1
vue-vben-admin
提交
0f4b847d
V
vue-vben-admin
项目概览
ChenSun1
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
0f4b847d
编写于
11月 03, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf(lazy-container): optimize lazyContainer code
上级
e79e540b
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
179 addition
and
97 deletion
+179
-97
.browserslistrc
.browserslistrc
+0
-3
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+3
-1
src/components/Container/src/LazyContainer.vue
src/components/Container/src/LazyContainer.vue
+20
-59
src/components/Container/src/collapse/CollapseContainer.vue
src/components/Container/src/collapse/CollapseContainer.vue
+6
-6
src/components/ContextMenu/src/index.tsx
src/components/ContextMenu/src/index.tsx
+4
-0
src/components/Preview/src/index.tsx
src/components/Preview/src/index.tsx
+1
-0
src/router/menus/modules/demo/comp.ts
src/router/menus/modules/demo/comp.ts
+30
-20
src/router/routes/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
+20
-1
src/views/demo/comp/lazy/Transition.vue
src/views/demo/comp/lazy/Transition.vue
+80
-0
src/views/demo/comp/lazy/index.vue
src/views/demo/comp/lazy/index.vue
+15
-7
未找到文件。
.browserslistrc
已删除
100644 → 0
浏览文件 @
e79e540b
> 1%
last 2 versions
not ie <= 10
CHANGELOG.zh_CN.md
浏览文件 @
0f4b847d
...
...
@@ -2,7 +2,8 @@
### ⚡ Performance Improvements
-
菜单性能继续优化
-
菜单性能继续优化,更流畅
-
优化懒加载组件及示例
### 🎫 Chores
...
...
@@ -13,6 +14,7 @@
### 🐛 Bug Fixes
-
修复升级之后 table 类型问题
-
修复分割菜单且左侧菜单没有数据时候,继续展示上一次子菜单的问题
## 2.0.0-rc.8 (2020-11-2)
...
...
src/components/Container/src/LazyContainer.vue
浏览文件 @
0f4b847d
<
template
>
<transition-group
v-bind=
"$attrs"
ref=
"elRef"
:name=
"transitionName"
:tag=
"tag"
>
<transition-group
class=
"lazy-container"
v-bind=
"$attrs"
ref=
"elRef"
:name=
"transitionName"
:tag=
"tag"
mode=
"out-in"
>
<div
key=
"component"
v-if=
"isInit"
>
<slot
:loading=
"loading"
/>
</div>
<div
key=
"skeleton"
>
<div
key=
"skeleton"
v-else
name=
"lazy-skeleton"
>
<slot
name=
"skeleton"
v-if=
"$slots.skeleton"
/>
<Skeleton
v-else
/>
</div>
...
...
@@ -12,19 +19,9 @@
<
script
lang=
"ts"
>
import
type
{
PropType
}
from
'
vue
'
;
import
{
defineComponent
,
reactive
,
onMounted
,
ref
,
unref
,
onUnmounted
,
toRef
,
toRefs
,
}
from
'
vue
'
;
import
{
defineComponent
,
reactive
,
onMounted
,
ref
,
toRef
,
toRefs
}
from
'
vue
'
;
import
{
Skeleton
}
from
'
ant-design-vue
'
;
import
{
useRaf
}
from
'
/@/hooks/event/useRaf
'
;
import
{
useTimeout
}
from
'
/@/hooks/core/useTimeout
'
;
import
{
useIntersectionObserver
}
from
'
/@/hooks/event/useIntersectionObserver
'
;
interface
State
{
...
...
@@ -36,13 +33,12 @@
name
:
'
LazyContainer
'
,
components
:
{
Skeleton
},
props
:
{
//
等待时间,如果指定了时间,不论可见与否,在指定时间之后自动加载
//
Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
timeout
:
{
type
:
Number
as
PropType
<
number
>
,
default
:
0
,
// default: 8000,
},
// 组件所在的视口,如果组件是在页面容器内滚动,视口就是该容器
// The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
viewport
:
{
type
:
(
typeof
window
!==
'
undefined
'
?
window
.
HTMLElement
:
Object
)
as
PropType
<
HTMLElement
...
...
@@ -50,19 +46,19 @@
default
:
()
=>
null
,
},
//
预加载阈值, css单位
//
Preload threshold, css unit
threshold
:
{
type
:
String
as
PropType
<
string
>
,
default
:
'
0px
'
,
},
//
视口的滚动方向, vertical代表垂直方向,horizontal代表水平方向
//
The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
direction
:
{
type
:
String
as
PropType
<
'
vertical
'
|
'
horizontal
'
>
,
default
:
'
vertical
'
,
},
//
包裹组件的外层容器的标签名
//
The label name of the outer container that wraps the component
tag
:
{
type
:
String
as
PropType
<
string
>
,
default
:
'
div
'
,
...
...
@@ -105,23 +101,11 @@
function
init
()
{
state
.
loading
=
true
;
requestAnimationFrameFn
(()
=>
{
state
.
isInit
=
true
;
emit
(
'
init
'
);
});
}
function
requestAnimationFrameFn
(
callback
:
()
=>
any
)
{
// Prevent waiting too long without executing the callback
// Set the maximum waiting time
useTimeout
(()
=>
{
if
(
state
.
isInit
)
return
;
callback
();
state
.
isInit
=
true
;
emit
(
'
init
'
);
},
props
.
maxWaitingTime
||
80
);
const
{
requestAnimationFrame
}
=
useRaf
();
return
requestAnimationFrame
;
}
function
initIntersectionObserver
()
{
...
...
@@ -165,31 +149,8 @@
});
</
script
>
<
style
lang=
"less"
>
.lazy-container-enter {
opacity: 0;
}
.lazy-container-enter-to {
opacity: 1;
}
.lazy-container-enter-from,
.lazy-container-enter-active {
position: absolute;
top: 0;
.lazy-container {
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;
height: 100%;
}
</
style
>
src/components/Container/src/collapse/CollapseContainer.vue
浏览文件 @
0f4b847d
...
...
@@ -8,13 +8,13 @@
<CollapseTransition
:enable=
"canExpan"
>
<Skeleton
v-if=
"loading"
/>
<div
class=
"collapse-container__body"
v-else
v-show=
"show"
>
<
!-- <
LazyContainer :timeout="lazyTime" v-if="lazy">
<LazyContainer
:timeout=
"lazyTime"
v-if=
"lazy"
>
<slot
/>
<
template
#skeleton
>
<slot
name=
"lazySkeleton"
/>
</
template
>
</LazyContainer>
-->
<slot
/>
</LazyContainer>
<slot
v-else
/>
</div>
</CollapseTransition>
</div>
...
...
@@ -28,7 +28,7 @@
import
CollapseHeader
from
'
./CollapseHeader.vue
'
;
import
{
Skeleton
}
from
'
ant-design-vue
'
;
// import LazyContainer from '../LazyContainer
';
import
LazyContainer
from
'
../LazyContainer.vue
'
;
import
{
triggerWindowResize
}
from
'
/@/utils/event/triggerWindowResizeEvent
'
;
// hook
...
...
@@ -36,7 +36,7 @@
export
default
defineComponent
({
components
:
{
Skeleton
,
//
LazyContainer,
LazyContainer
,
CollapseHeader
,
CollapseTransition
,
},
...
...
@@ -75,7 +75,7 @@
// 延时加载时间
lazyTime
:
{
type
:
Number
as
PropType
<
number
>
,
default
:
300
0
,
default
:
0
,
},
},
setup
(
props
)
{
...
...
src/components/ContextMenu/src/index.tsx
浏览文件 @
0f4b847d
...
...
@@ -25,11 +25,13 @@ export default defineComponent({
const
state
=
reactive
({
show
:
false
,
});
onMounted
(()
=>
{
nextTick
(()
=>
{
state
.
show
=
true
;
});
});
onUnmounted
(()
=>
{
const
el
=
unref
(
wrapRef
);
el
&&
document
.
body
.
removeChild
(
el
);
...
...
@@ -61,6 +63,7 @@ export default defineComponent({
handler
&&
handler
();
}
function
renderContent
(
item
:
ContextMenuItem
)
{
const
{
icon
,
label
}
=
item
;
...
...
@@ -72,6 +75,7 @@ export default defineComponent({
</
span
>
);
}
function
renderMenuItem
(
items
:
ContextMenuItem
[])
{
return
items
.
map
((
item
,
index
)
=>
{
const
{
disabled
,
label
,
children
,
divider
=
false
}
=
item
;
...
...
src/components/Preview/src/index.tsx
浏览文件 @
0f4b847d
...
...
@@ -265,6 +265,7 @@ export default defineComponent({
</
div
>
);
};
return
()
=>
{
return
(
imgState
.
show
&&
(
...
...
src/router/menus/modules/demo/comp.ts
浏览文件 @
0f4b847d
...
...
@@ -18,6 +18,26 @@ const menu: MenuModule = {
name
:
'
动画组件
'
,
},
{
path
:
'
modal
'
,
name
:
'
弹窗扩展
'
,
},
{
path
:
'
drawer
'
,
name
:
'
抽屉扩展
'
,
},
{
path
:
'
desc
'
,
name
:
'
详情组件
'
,
},
{
path
:
'
qrcode
'
,
name
:
'
二维码组件
'
,
},
{
path
:
'
strength-meter
'
,
name
:
'
密码强度组件
'
,
},
{
path
:
'
scroll
'
,
name
:
'
滚动组件
'
,
...
...
@@ -36,21 +56,19 @@ const menu: MenuModule = {
},
],
},
{
path
:
'
modal
'
,
name
:
'
弹窗扩展
'
,
},
{
path
:
'
drawer
'
,
name
:
'
抽屉扩展
'
,
},
{
path
:
'
desc
'
,
name
:
'
详情组件
'
,
},
{
path
:
'
lazy
'
,
name
:
'
懒加载组件
'
,
children
:
[
{
path
:
'
basic
'
,
name
:
'
基础示例
'
,
},
{
path
:
'
transition
'
,
name
:
'
动画效果
'
,
},
],
},
{
path
:
'
verify
'
,
...
...
@@ -66,14 +84,6 @@ const menu: MenuModule = {
},
],
},
{
path
:
'
qrcode
'
,
name
:
'
二维码组件
'
,
},
{
path
:
'
strength-meter
'
,
name
:
'
密码强度组件
'
,
},
],
},
};
...
...
src/router/routes/modules/demo/comp.ts
浏览文件 @
0f4b847d
...
...
@@ -99,13 +99,32 @@ export default {
title
:
'
详情组件
'
,
},
},
{
path
:
'
/lazy
'
,
name
:
'
lazyDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/comp/lazy/index.vue
'
)
,
redirect
:
'
/comp/lazy/basic
'
,
meta
:
{
title
:
'
懒加载组件
'
,
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
BasicLazyDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/comp/lazy/index.vue
'
),
meta
:
{
title
:
'
基础示例
'
,
},
},
{
path
:
'
transition
'
,
name
:
'
BasicTransitionDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/comp/lazy/Transition.vue
'
),
meta
:
{
title
:
'
动画效果
'
,
},
},
],
},
{
path
:
'
/verify
'
,
...
...
src/views/demo/comp/lazy/Transition.vue
0 → 100644
浏览文件 @
0f4b847d
<
template
>
<div
class=
"p-4 lazy-base-demo"
>
<Alert
message=
"自定义动画"
description=
"懒加载组件显示动画"
type=
"info"
show-icon
/>
<div
class=
"lazy-base-demo-wrap"
>
<h1>
向下滚动
</h1>
<div
class=
"lazy-base-demo-box"
>
<LazyContainer
transitionName=
"custom"
>
<TargetContent
/>
</LazyContainer>
</div>
</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"
>
.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;
}
&-box {
width: 300px;
height: 300px;
}
h1 {
height: 1300px;
margin: 20px 0;
}
}
.custom-enter {
opacity: 0;
transform: scale(0.4) translate(100%);
}
.custom-enter-to {
opacity: 1;
}
.custom-enter-active {
position: absolute;
top: 0;
width: 100%;
transition: all 0.5s;
}
.custom-leave {
opacity: 1;
}
.custom-leave-to {
opacity: 0;
transform: scale(0.4) translate(-100%);
}
.custom-leave-active {
transition: all 0.5s;
}
</
style
>
src/views/demo/comp/lazy/index.vue
浏览文件 @
0f4b847d
...
...
@@ -3,12 +3,15 @@
<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
class=
"lazy-base-demo-box"
>
<LazyContainer>
<TargetContent
/>
<template
#skeleton
>
<Skeleton
:rows=
"10"
/>
</
template
>
</LazyContainer>
</div>
</div>
</div>
</template>
...
...
@@ -24,7 +27,7 @@
},
});
</
script
>
<
style
lang=
"less"
scoped
>
<
style
lang=
"less"
>
.lazy-base-demo {
&-wrap {
display: flex;
...
...
@@ -38,6 +41,11 @@
align-items: center;
}
&-box {
width: 300px;
height: 300px;
}
h1 {
height: 1300px;
margin: 20px 0;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录