Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
6a9bd686
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
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 搜索 >>
提交
6a9bd686
编写于
4月 06, 2023
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: remove LazyContainer
上级
6890dd72
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
2 addition
and
382 deletion
+2
-382
packages/hooks/src/useRefs.ts
packages/hooks/src/useRefs.ts
+2
-2
src/components/Container/index.ts
src/components/Container/index.ts
+0
-2
src/components/Container/src/LazyContainer.vue
src/components/Container/src/LazyContainer.vue
+0
-145
src/hooks/event/useIntersectionObserver.ts
src/hooks/event/useIntersectionObserver.ts
+0
-48
src/hooks/web/useMessage.tsx
src/hooks/web/useMessage.tsx
+0
-2
src/locales/lang/en/routes/demo.ts
src/locales/lang/en/routes/demo.ts
+0
-4
src/locales/lang/zh-CN/routes/demo.ts
src/locales/lang/zh-CN/routes/demo.ts
+0
-4
src/router/routes/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
+0
-27
src/views/demo/comp/lazy/TargetContent.vue
src/views/demo/comp/lazy/TargetContent.vue
+0
-19
src/views/demo/comp/lazy/Transition.vue
src/views/demo/comp/lazy/Transition.vue
+0
-77
src/views/demo/comp/lazy/index.vue
src/views/demo/comp/lazy/index.vue
+0
-52
未找到文件。
packages/hooks/src/useRefs.ts
浏览文件 @
6a9bd686
import
type
{
Ref
}
from
'
vue
'
;
import
{
onBeforeUpdate
,
r
ef
}
from
'
vue
'
;
import
{
onBeforeUpdate
,
shallowR
ef
}
from
'
vue
'
;
export
function
useRefs
():
[
Ref
<
HTMLElement
[]
>
,
(
index
:
number
)
=>
(
el
:
HTMLElement
)
=>
void
]
{
const
refs
=
r
ef
([])
as
Ref
<
HTMLElement
[]
>
;
const
refs
=
shallowR
ef
([])
as
Ref
<
HTMLElement
[]
>
;
onBeforeUpdate
(()
=>
{
refs
.
value
=
[];
...
...
src/components/Container/index.ts
浏览文件 @
6a9bd686
import
{
withInstall
}
from
'
/@/utils
'
;
import
collapseContainer
from
'
./src/collapse/CollapseContainer.vue
'
;
import
scrollContainer
from
'
./src/ScrollContainer.vue
'
;
import
lazyContainer
from
'
./src/LazyContainer.vue
'
;
export
const
CollapseContainer
=
withInstall
(
collapseContainer
);
export
const
ScrollContainer
=
withInstall
(
scrollContainer
);
export
const
LazyContainer
=
withInstall
(
lazyContainer
);
export
*
from
'
./src/typing
'
;
src/components/Container/src/LazyContainer.vue
已删除
100644 → 0
浏览文件 @
6890dd72
<
template
>
<transition-group
class=
"h-full w-full"
v-bind=
"$attrs"
ref=
"elRef"
:name=
"transitionName"
:tag=
"tag"
mode=
"out-in"
>
<div
key=
"component"
v-if=
"isInit"
>
<slot
:loading=
"loading"
></slot>
</div>
<div
key=
"skeleton"
v-else
>
<slot
name=
"skeleton"
v-if=
"$slots.skeleton"
></slot>
<Skeleton
v-else
/>
</div>
</transition-group>
</
template
>
<
script
lang=
"ts"
>
import
type
{
PropType
}
from
'
vue
'
;
import
{
defineComponent
,
reactive
,
onMounted
,
ref
,
toRef
,
toRefs
}
from
'
vue
'
;
import
{
useTimeoutFn
}
from
'
@vben/hooks
'
;
import
{
Skeleton
}
from
'
ant-design-vue
'
;
import
{
useIntersectionObserver
}
from
'
/@/hooks/event/useIntersectionObserver
'
;
interface
State
{
isInit
:
boolean
;
loading
:
boolean
;
intersectionObserverInstance
:
IntersectionObserver
|
null
;
}
const
props
=
{
/**
* Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
*/
timeout
:
{
type
:
Number
},
/**
* 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
>
,
default
:
()
=>
null
,
},
/**
* Preload threshold, css unit
*/
threshold
:
{
type
:
String
,
default
:
'
0px
'
},
/**
* The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
*/
direction
:
{
type
:
String
,
default
:
'
vertical
'
,
validator
:
(
v
)
=>
[
'
vertical
'
,
'
horizontal
'
].
includes
(
v
),
},
/**
* The label name of the outer container that wraps the component
*/
tag
:
{
type
:
String
,
default
:
'
div
'
},
maxWaitingTime
:
{
type
:
Number
,
default
:
80
},
/**
* transition name
*/
transitionName
:
{
type
:
String
,
default
:
'
lazy-container
'
},
};
export
default
defineComponent
({
name
:
'
LazyContainer
'
,
components
:
{
Skeleton
},
inheritAttrs
:
false
,
props
,
emits
:
[
'
init
'
],
setup
(
props
,
{
emit
})
{
const
elRef
=
ref
();
const
state
=
reactive
<
State
>
({
isInit
:
false
,
loading
:
false
,
intersectionObserverInstance
:
null
,
});
onMounted
(()
=>
{
immediateInit
();
initIntersectionObserver
();
});
// If there is a set delay time, it will be executed immediately
function
immediateInit
()
{
const
{
timeout
}
=
props
;
timeout
&&
useTimeoutFn
(()
=>
{
init
();
},
timeout
);
}
function
init
()
{
state
.
loading
=
true
;
useTimeoutFn
(()
=>
{
if
(
state
.
isInit
)
return
;
state
.
isInit
=
true
;
emit
(
'
init
'
);
},
props
.
maxWaitingTime
||
80
);
}
function
initIntersectionObserver
()
{
const
{
timeout
,
direction
,
threshold
}
=
props
;
if
(
timeout
)
return
;
// According to the scrolling direction to construct the viewport margin, used to load in advance
let
rootMargin
=
'
0px
'
;
switch
(
direction
)
{
case
'
vertical
'
:
rootMargin
=
`
${
threshold
}
0px`
;
break
;
case
'
horizontal
'
:
rootMargin
=
`0px
${
threshold
}
`
;
break
;
}
try
{
const
{
stop
,
observer
}
=
useIntersectionObserver
({
rootMargin
,
target
:
toRef
(
elRef
.
value
,
'
$el
'
),
onIntersect
:
(
entries
:
any
[])
=>
{
const
isIntersecting
=
entries
[
0
].
isIntersecting
||
entries
[
0
].
intersectionRatio
;
if
(
isIntersecting
)
{
init
();
if
(
observer
)
{
stop
();
}
}
},
root
:
toRef
(
props
,
'
viewport
'
),
});
}
catch
(
e
)
{
init
();
}
}
return
{
elRef
,
...
toRefs
(
state
),
};
},
});
</
script
>
src/hooks/event/useIntersectionObserver.ts
已删除
100644 → 0
浏览文件 @
6890dd72
import
{
Ref
,
watchEffect
,
ref
}
from
'
vue
'
;
interface
IntersectionObserverProps
{
target
:
Ref
<
Element
|
null
|
undefined
>
;
root
?:
Ref
<
any
>
;
onIntersect
:
IntersectionObserverCallback
;
rootMargin
?:
string
;
threshold
?:
number
;
}
export
function
useIntersectionObserver
({
target
,
root
,
onIntersect
,
rootMargin
=
'
0px
'
,
threshold
=
0.1
,
}:
IntersectionObserverProps
)
{
let
cleanup
=
()
=>
{};
const
observer
:
Ref
<
Nullable
<
IntersectionObserver
>>
=
ref
(
null
);
const
stopEffect
=
watchEffect
(()
=>
{
cleanup
();
observer
.
value
=
new
IntersectionObserver
(
onIntersect
,
{
root
:
root
?
root
.
value
:
null
,
rootMargin
,
threshold
,
});
const
current
=
target
.
value
;
current
&&
observer
.
value
.
observe
(
current
);
cleanup
=
()
=>
{
if
(
observer
.
value
)
{
observer
.
value
.
disconnect
();
target
.
value
&&
observer
.
value
.
unobserve
(
target
.
value
);
}
};
});
return
{
observer
,
stop
:
()
=>
{
cleanup
();
stopEffect
();
},
};
}
src/hooks/web/useMessage.tsx
浏览文件 @
6a9bd686
import
type
{
ModalFunc
,
ModalFuncProps
}
from
'
ant-design-vue/lib/modal/Modal
'
;
import
{
Modal
,
message
as
Message
,
notification
}
from
'
ant-design-vue
'
;
import
{
InfoCircleFilled
,
CheckCircleFilled
,
CloseCircleFilled
}
from
'
@ant-design/icons-vue
'
;
import
{
NotificationArgsProps
,
ConfigProps
}
from
'
ant-design-vue/lib/notification
'
;
import
{
useI18n
}
from
'
./useI18n
'
;
import
{
isString
}
from
'
/@/utils/is
'
;
...
...
src/locales/lang/en/routes/demo.ts
浏览文件 @
6a9bd686
...
...
@@ -29,10 +29,6 @@ export default {
drawer
:
'
Drawer
'
,
desc
:
'
Desc
'
,
lazy
:
'
Lazy
'
,
lazyBasic
:
'
Basic
'
,
lazyTransition
:
'
Animation
'
,
verify
:
'
Verify
'
,
verifyDrag
:
'
Drag
'
,
verifyRotate
:
'
Picture Restore
'
,
...
...
src/locales/lang/zh-CN/routes/demo.ts
浏览文件 @
6a9bd686
...
...
@@ -28,10 +28,6 @@ export default {
drawer
:
'
抽屉扩展
'
,
desc
:
'
详情组件
'
,
lazy
:
'
懒加载组件
'
,
lazyBasic
:
'
基础示例
'
,
lazyTransition
:
'
动画效果
'
,
verify
:
'
验证组件
'
,
verifyDrag
:
'
拖拽校验
'
,
verifyRotate
:
'
图片还原
'
,
...
...
src/router/routes/modules/demo/comp.ts
浏览文件 @
6a9bd686
...
...
@@ -470,33 +470,6 @@ const comp: AppRouteModule = {
},
},
{
path
:
'
lazy
'
,
name
:
'
LazyDemo
'
,
component
:
getParentLayout
(
'
LazyDemo
'
),
redirect
:
'
/comp/lazy/basic
'
,
meta
:
{
title
:
t
(
'
routes.demo.comp.lazy
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
BasicLazyDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/comp/lazy/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.comp.lazyBasic
'
),
},
},
{
path
:
'
transition
'
,
name
:
'
BasicTransitionDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/comp/lazy/Transition.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.comp.lazyTransition
'
),
},
},
],
},
{
path
:
'
verify
'
,
name
:
'
VerifyDemo
'
,
...
...
src/views/demo/comp/lazy/TargetContent.vue
已删除
100644 → 0
浏览文件 @
6890dd72
<
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/Transition.vue
已删除
100644 → 0
浏览文件 @
6890dd72
<
template
>
<PageWrapper
title=
"懒加载自定义动画示例"
content=
"懒加载组件显示动画"
>
<div
class=
"lazy-base-demo-wrap"
>
<h1>
向下滚动
</h1>
<div
class=
"lazy-base-demo-box"
>
<LazyContainer
transitionName=
"custom"
>
<TargetContent
/>
</LazyContainer>
</div>
</div>
</PageWrapper>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
TargetContent
from
'
./TargetContent.vue
'
;
import
{
LazyContainer
}
from
'
/@/components/Container/index
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
export
default
defineComponent
({
components
:
{
LazyContainer
,
TargetContent
,
PageWrapper
},
});
</
script
>
<
style
lang=
"less"
>
.lazy-base-demo {
&-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 2000px;
margin: 20px auto;
background-color: @component-background;
text-align: center;
}
&-box {
width: 300px;
height: 300px;
}
h1 {
height: 1300px;
margin: 20px 0;
}
}
.custom-enter {
transform: scale(0.4) translate(100%);
opacity: 0;
}
.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 {
transform: scale(0.4) translate(-100%);
opacity: 0;
}
.custom-leave-active {
transition: all 0.5s;
}
</
style
>
src/views/demo/comp/lazy/index.vue
已删除
100644 → 0
浏览文件 @
6890dd72
<
template
>
<PageWrapper
title=
"懒加载基础示例"
content=
"向下滚动到可见区域才会加载组件"
>
<div
class=
"lazy-base-demo-wrap"
>
<h1>
向下滚动
</h1>
<div
class=
"lazy-base-demo-box"
>
<LazyContainer>
<TargetContent
/>
<template
#skeleton
>
<Skeleton
:rows=
"10"
/>
</
template
>
</LazyContainer>
</div>
</div>
</PageWrapper>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
Skeleton
}
from
'
ant-design-vue
'
;
import
TargetContent
from
'
./TargetContent.vue
'
;
import
{
LazyContainer
}
from
'
/@/components/Container/index
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
export
default
defineComponent
({
components
:
{
LazyContainer
,
PageWrapper
,
TargetContent
,
Skeleton
},
});
</
script
>
<
style
lang=
"less"
>
.lazy-base-demo {
&-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 2000px;
margin: 20px auto;
background-color: @component-background;
text-align: center;
}
&-box {
width: 300px;
height: 300px;
}
h1 {
height: 1300px;
margin: 20px 0;
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录