Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
c24cdefa
U
uni-app
项目概览
DCloud
/
uni-app
29 天 前同步成功
通知
702
Star
38704
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c24cdefa
编写于
9月 19, 2022
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): previewImage add close btn and add navigation
上级
318c7a05
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
211 addition
and
83 deletion
+211
-83
build/manifest.js
build/manifest.js
+8
-1
packages/uni-h5/manifest.json
packages/uni-h5/manifest.json
+5
-1
packages/webpack-uni-pages-loader/lib/platforms/h5.js
packages/webpack-uni-pages-loader/lib/platforms/h5.js
+0
-26
src/platforms/h5/components/app/index.vue
src/platforms/h5/components/app/index.vue
+31
-26
src/platforms/h5/components/app/popup/index.js
src/platforms/h5/components/app/popup/index.js
+3
-1
src/platforms/h5/components/app/popup/mixins/preview-image.js
...platforms/h5/components/app/popup/mixins/preview-image.js
+32
-0
src/platforms/h5/components/app/popup/preview-image/image-view.vue
...orms/h5/components/app/popup/preview-image/image-view.vue
+0
-0
src/platforms/h5/components/app/popup/preview-image/index.vue
...platforms/h5/components/app/popup/preview-image/index.vue
+125
-0
src/platforms/h5/components/system-routes/index.js
src/platforms/h5/components/system-routes/index.js
+2
-4
src/platforms/h5/service/api/media/preview-image.js
src/platforms/h5/service/api/media/preview-image.js
+5
-24
未找到文件。
build/manifest.js
浏览文件 @
c24cdefa
...
...
@@ -46,7 +46,14 @@ const DEPS = {
[
'
/core/view/components/swiper-item/index.vue
'
,
'
SwiperItem
'
],
[
'
/core/view/components/movable-area/index.vue
'
,
'
MovableArea
'
],
[
'
/core/view/components/movable-view/index.vue
'
,
'
MovableView
'
],
[
'
/platforms/h5/components/system-routes/preview-image/index.vue
'
,
'
PreviewImage
'
]
[
'
/platforms/h5/components/app/popup/preview-image/index.vue
'
,
'
PreviewImage
'
],
[
'
/platforms/h5/components/app/popup/mixins/preview-image.js
'
,
'
PreviewImageMixin
'
]
],
showToast
:
TOAST_DEPS
,
hideToast
:
TOAST_DEPS
,
...
...
packages/uni-h5/manifest.json
浏览文件 @
c24cdefa
...
...
@@ -383,8 +383,12 @@
"MovableView"
],
[
"/platforms/h5/components/
system-routes
/preview-image/index.vue"
,
"/platforms/h5/components/
app/popup
/preview-image/index.vue"
,
"PreviewImage"
],
[
"/platforms/h5/components/app/popup/mixins/preview-image.js"
,
"PreviewImageMixin"
]
]
],
...
...
packages/webpack-uni-pages-loader/lib/platforms/h5.js
浏览文件 @
c24cdefa
...
...
@@ -257,32 +257,6 @@ const genSystemRoutes = function () {
return
[
`
{
path: '/preview-image',
component: {
render (createElement) {
return createElement(
'Page',
{
props:{
navigationStyle:'custom'
}
},
[
createElement('system-preview-image', {
slot: 'page'
})
]
)
}
},
meta:{
name:'preview-image',
pagePath:'/preview-image'
}
}
`
,
`
{
path: '/choose-location',
component: {
render (createElement) {
...
...
src/platforms/h5/components/app/index.vue
浏览文件 @
c24cdefa
<
template
>
<uni-app
:class=
"
{'uni-app--showtabbar':showTabBar,'uni-app--maxwidth':showMaxWidth}">
<layout
ref=
"layout"
:router-key=
"key"
:keep-alive-include=
"keepAliveInclude"
<layout
ref=
"layout"
:router-key=
"key"
:keep-alive-include=
"keepAliveInclude"
@
maxWidth=
"onMaxWidth"
@
layout=
"onLayout"
@
layout=
"onLayout"
/>
<tab-bar
v-if=
"hasTabBar"
v-show=
"showTabBar"
ref=
"tabBar"
v-bind=
"tabBarOptions"
<tab-bar
v-if=
"hasTabBar"
v-show=
"showTabBar"
ref=
"tabBar"
v-bind=
"tabBarOptions"
/>
<toast
v-if=
"$options.components.Toast"
v-bind=
"showToast"
<toast
v-if=
"$options.components.Toast"
v-bind=
"showToast"
/>
<action-sheet
v-if=
"$options.components.ActionSheet"
v-bind=
"showActionSheet"
@
close=
"_onActionSheetClose"
<action-sheet
v-if=
"$options.components.ActionSheet"
v-bind=
"showActionSheet"
@
close=
"_onActionSheetClose"
/>
<modal
v-if=
"$options.components.Modal"
v-bind=
"showModal"
@
close=
"_onModalClose"
<modal
v-if=
"$options.components.Modal"
v-bind=
"showModal"
@
close=
"_onModalClose"
/>
<preview-image
v-if=
"$options.components.PreviewImage"
v-bind=
"previewImage"
@
close=
"_onPreviewClose"
/>
<template
v-if=
"sysComponents&&sysComponents.length"
>
<component
:is=
"item"
v-for=
"(item, index) in sysComponents"
:key=
"index"
<component
:is=
"item"
v-for=
"(item, index) in sysComponents"
:key=
"index"
/>
</
template
>
</uni-app>
...
...
@@ -165,4 +170,4 @@ export default {
width
:
100%
;
height
:
100%
;
}
</
style
>
</
style
>
src/platforms/h5/components/app/popup/index.js
浏览文件 @
c24cdefa
import
Toast
from
'
./toast
'
import
Modal
from
'
./modal
'
import
ActionSheet
from
'
./actionSheet
'
import
PreviewImage
from
'
./preview-image
'
export
default
{
Toast
,
Modal
,
ActionSheet
ActionSheet
,
PreviewImage
}
src/platforms/h5/components/app/popup/mixins/preview-image.js
0 → 100644
浏览文件 @
c24cdefa
import
{
isFn
}
from
'
uni-shared
'
export
default
{
data
()
{
return
{
previewImage
:
{
visible
:
false
}
}
},
created
()
{
UniServiceJSBridge
.
on
(
'
onShowPreviewImage
'
,
(
args
,
callback
)
=>
{
this
.
previewImage
=
Object
.
assign
({},
args
,
{
visible
:
true
})
isFn
(
callback
)
&&
this
.
$nextTick
(
callback
)
})
UniServiceJSBridge
.
on
(
'
onClosePreviewImage
'
,
(
callback
)
=>
{
this
.
_onPreviewClose
()
isFn
(
callback
)
&&
this
.
$nextTick
(
callback
)
})
UniServiceJSBridge
.
on
(
'
onHidePopup
'
,
_
=>
{
this
.
previewImage
.
visible
=
false
})
},
methods
:
{
// 处理 preview-image close 回调
_onPreviewClose
(
res
)
{
this
.
previewImage
.
visible
=
false
}
}
}
src/platforms/h5/components/
system-routes
/preview-image/image-view.vue
→
src/platforms/h5/components/
app/popup
/preview-image/image-view.vue
浏览文件 @
c24cdefa
文件已移动
src/platforms/h5/components/
system-routes
/preview-image/index.vue
→
src/platforms/h5/components/
app/popup
/preview-image/index.vue
浏览文件 @
c24cdefa
<
template
>
<div
class=
"uni-system-preview-image"
@
click=
"_click"
>
<v-uni-swiper
:current.sync=
"index"
:indicator-dots=
"false"
:autoplay=
"false"
class=
"uni-system-preview-image-swiper"
>
<v-uni-swiper-item
v-for=
"(src,key) in urls"
:key=
"key"
>
<image-view
:src=
"src"
/>
</v-uni-swiper-item>
</v-uni-swiper>
</div>
</
template
>
<
script
>
import
imageView
from
'
./image-view
'
export
default
{
name
:
'
SystemPreviewImage
'
,
components
:
{
imageView
},
data
()
{
const
{
urls
,
current
}
=
this
.
$route
.
params
return
{
urls
:
urls
||
[],
current
,
index
:
0
}
},
created
()
{
const
index
=
typeof
this
.
current
===
'
number
'
?
this
.
current
:
this
.
urls
.
indexOf
(
this
.
current
)
this
.
index
=
index
<
0
?
0
:
index
},
mounted
()
{
const
MAX_MOVE
=
20
let
x
=
0
let
y
=
0
this
.
$el
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
this
.
preventDefault
=
false
x
=
event
.
clientX
y
=
event
.
clientY
})
this
.
$el
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
if
(
Math
.
abs
(
event
.
clientX
-
x
)
>
MAX_MOVE
||
Math
.
abs
(
event
.
clientY
-
y
)
>
MAX_MOVE
)
{
this
.
preventDefault
=
true
}
})
},
methods
:
{
_click
()
{
if
(
!
this
.
preventDefault
)
{
getApp
().
$router
.
back
()
}
}
}
}
</
script
>
<
style
>
.uni-system-preview-image
{
display
:
block
;
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
<
template
>
<div
v-if=
"visible"
class=
"uni-system-preview-image"
@
click=
"_click"
>
<v-uni-swiper
navigation=
"auto"
:current.sync=
"index"
:indicator-dots=
"false"
:autoplay=
"false"
class=
"uni-system-preview-image-swiper"
>
<v-uni-swiper-item
v-for=
"(src, key) in urls"
:key=
"key"
>
<image-view
:src=
"src"
/>
</v-uni-swiper-item>
</v-uni-swiper>
<div
class=
"nav-btn-back"
>
<i
class=
"uni-btn-icon"
>

</i>
</div>
</div>
</
template
>
<
script
>
import
imageView
from
'
./image-view
'
export
default
{
name
:
'
PreviewImage
'
,
components
:
{
imageView
},
props
:
{
visible
:
{
type
:
Boolean
,
default
:
false
},
urls
:
{
type
:
Array
,
default
:
()
=>
[]
},
current
:
{
type
:
[
String
,
Number
],
default
:
0
}
},
data
()
{
return
{
index
:
0
}
},
watch
:
{
visible
(
val
)
{
if
(
val
)
{
const
index
=
typeof
this
.
current
===
'
number
'
?
this
.
current
:
this
.
urls
.
indexOf
(
this
.
current
)
this
.
index
=
index
<
0
?
0
:
index
}
}
},
mounted
()
{
const
MAX_MOVE
=
20
let
x
=
0
let
y
=
0
this
.
$el
.
addEventListener
(
'
mousedown
'
,
event
=>
{
this
.
preventDefault
=
false
x
=
event
.
clientX
y
=
event
.
clientY
})
this
.
$el
.
addEventListener
(
'
mouseup
'
,
event
=>
{
if
(
Math
.
abs
(
event
.
clientX
-
x
)
>
MAX_MOVE
||
Math
.
abs
(
event
.
clientY
-
y
)
>
MAX_MOVE
)
{
this
.
preventDefault
=
true
}
})
},
methods
:
{
_click
()
{
if
(
!
this
.
preventDefault
)
{
this
.
$emit
(
'
close
'
)
}
}
}
}
</
script
>
<
style
>
.uni-system-preview-image
{
display
:
block
;
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
z-index
:
999
;
background
:
rgba
(
0
,
0
,
0
,
0.8
);
}
.uni-system-preview-image-swiper
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
}
</
style
>
z-index
:
999
;
background
:
rgba
(
0
,
0
,
0
,
0.8
);
}
.uni-system-preview-image-swiper
{
position
:
absolute
;
left
:
0
;
top
:
0
;
width
:
100%
;
height
:
100%
;
}
.uni-system-preview-image
.nav-btn-back
{
position
:
absolute
;
box-sizing
:
border-box
;
top
:
0
;
left
:
0
;
width
:
44px
;
height
:
44px
;
padding
:
6px
;
line-height
:
32px
;
font-size
:
26px
;
color
:
white
;
text-align
:
center
;
cursor
:
pointer
;
}
</
style
>
src/platforms/h5/components/system-routes/index.js
浏览文件 @
c24cdefa
import
ChooseLocation
from
'
./choose-location
'
import
OpenLocation
from
'
./open-location
'
import
PreviewImage
from
'
./preview-image
'
export
default
{
ChooseLocation
,
OpenLocation
,
PreviewImage
}
OpenLocation
}
src/platforms/h5/service/api/media/preview-image.js
浏览文件 @
c24cdefa
const
{
emit
,
invokeCallbackHandler
:
invoke
}
=
UniServiceJSBridge
export
function
previewImage
({
urls
,
current
},
callbackId
)
{
getApp
().
$router
.
push
({
type
:
'
navigateTo
'
,
path
:
'
/preview-image
'
,
params
:
{
urls
,
current
}
},
function
()
{
export
function
previewImage
(
args
,
callbackId
)
{
emit
(
'
onShowPreviewImage
'
,
args
,
function
(
res
)
{
invoke
(
callbackId
,
{
errMsg
:
'
previewImage:ok
'
})
},
function
()
{
invoke
(
callbackId
,
{
errMsg
:
'
previewImage:fail
'
})
})
}
export
function
closePreviewImage
(
_
,
callbackId
)
{
const
$router
=
getApp
().
$router
if
(
$router
.
history
.
current
.
path
===
'
/preview-image
'
)
{
$router
.
back
()
emit
(
'
onClosePreviewImage
'
,
function
()
{
invoke
(
callbackId
,
{
errMsg
:
'
closePreviewImage:ok
'
})
}
else
{
invoke
(
callbackId
,
{
errMsg
:
'
closePreviewImage:fail
'
})
}
})
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录