Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qianlong66
uni-app
提交
9eddd9d8
U
uni-app
项目概览
qianlong66
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9eddd9d8
编写于
5月 11, 2022
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: merge network request for image
上级
9bd8b86b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
23 addition
and
16 deletion
+23
-16
packages/uni-components/src/vue/image/index.tsx
packages/uni-components/src/vue/image/index.tsx
+23
-16
未找到文件。
packages/uni-components/src/vue/image/index.tsx
浏览文件 @
9eddd9d8
...
@@ -69,25 +69,12 @@ export default /*#__PURE__*/ defineBuiltInComponent({
...
@@ -69,25 +69,12 @@ export default /*#__PURE__*/ defineBuiltInComponent({
const
state
=
useImageState
(
rootRef
,
props
)
const
state
=
useImageState
(
rootRef
,
props
)
const
trigger
=
useCustomEvent
(
rootRef
,
emit
)
const
trigger
=
useCustomEvent
(
rootRef
,
emit
)
const
{
fixSize
}
=
useImageSize
(
rootRef
,
props
,
state
)
const
{
fixSize
}
=
useImageSize
(
rootRef
,
props
,
state
)
useImageLoader
(
state
,
fixSize
,
trigger
)
useImageLoader
(
state
,
props
,
rootRef
,
fixSize
,
trigger
)
return
()
=>
{
return
()
=>
{
const
{
mode
}
=
props
const
{
imgSrc
,
modeStyle
,
src
}
=
state
let
imgTsx
if
(
__NODE_JS__
)
{
imgTsx
=
<
img
src
=
{
src
}
draggable
=
{
props
.
draggable
}
/>
}
else
{
imgTsx
=
imgSrc
?
(
<
img
src
=
{
imgSrc
}
draggable
=
{
props
.
draggable
}
/>
)
:
(
<
img
/>
)
}
return
(
return
(
<
uni
-
image
ref
=
{
rootRef
}
>
<
uni
-
image
ref
=
{
rootRef
}
>
<
div
style
=
{
modeStyle
}
/>
<
div
style
=
{
state
.
modeStyle
}
/>
{
imgTsx
}
{
FIX_MODES
[
props
.
mode
as
keyof
typeof
FIX_MODES
]
?
(
{
FIX_MODES
[
mode
as
keyof
typeof
FIX_MODES
]
?
(
// @ts-ignore
// @ts-ignore
<
ResizeSensor
onResize
=
{
fixSize
}
/>
<
ResizeSensor
onResize
=
{
fixSize
}
/>
)
:
(
)
:
(
...
@@ -136,10 +123,13 @@ function useImageState(rootRef: Ref<HTMLElement | null>, props: ImageProps) {
...
@@ -136,10 +123,13 @@ function useImageState(rootRef: Ref<HTMLElement | null>, props: ImageProps) {
function
useImageLoader
(
function
useImageLoader
(
state
:
ImageState
,
state
:
ImageState
,
props
:
ImageProps
,
rootRef
:
Ref
<
HTMLElement
|
null
>
,
fixSize
:
FixSize
,
fixSize
:
FixSize
,
trigger
:
CustomEventTrigger
trigger
:
CustomEventTrigger
)
{
)
{
let
img
:
HTMLImageElement
|
null
let
img
:
HTMLImageElement
|
null
let
draggableImg
:
HTMLImageElement
|
null
const
setState
=
(
width
=
0
,
height
=
0
,
imgSrc
=
''
)
=>
{
const
setState
=
(
width
=
0
,
height
=
0
,
imgSrc
=
''
)
=>
{
state
.
origWidth
=
width
state
.
origWidth
=
width
state
.
origHeight
=
height
state
.
origHeight
=
height
...
@@ -158,6 +148,14 @@ function useImageLoader(
...
@@ -158,6 +148,14 @@ function useImageLoader(
const
{
width
,
height
}
=
img
!
const
{
width
,
height
}
=
img
!
setState
(
width
,
height
,
src
)
setState
(
width
,
height
,
src
)
fixSize
()
fixSize
()
img
!
.
draggable
=
props
.
draggable
if
(
draggableImg
)
{
draggableImg
.
remove
()
}
draggableImg
=
img
rootRef
.
value
!
.
appendChild
(
img
!
)
resetImage
()
resetImage
()
trigger
(
'
load
'
,
evt
,
{
trigger
(
'
load
'
,
evt
,
{
width
,
width
,
...
@@ -184,6 +182,15 @@ function useImageLoader(
...
@@ -184,6 +182,15 @@ function useImageLoader(
()
=>
state
.
src
,
()
=>
state
.
src
,
(
value
)
=>
loadImage
(
value
)
(
value
)
=>
loadImage
(
value
)
)
)
watch
(
()
=>
state
.
imgSrc
,
(
value
)
=>
{
if
(
!
value
&&
draggableImg
)
{
draggableImg
.
remove
()
draggableImg
=
null
}
}
)
onMounted
(()
=>
loadImage
(
state
.
src
))
onMounted
(()
=>
loadImage
(
state
.
src
))
onBeforeUnmount
(()
=>
resetImage
())
onBeforeUnmount
(()
=>
resetImage
())
}
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录