Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
anyefeiyu
uni-app
提交
deca0508
U
uni-app
项目概览
anyefeiyu
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
deca0508
编写于
10月 27, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'dev' of
git://github.com/chenli1989/uni-app
into dev
上级
16da9b82
997964b5
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
243 addition
and
240 deletion
+243
-240
src/core/view/components/image/index.vue
src/core/view/components/image/index.vue
+243
-240
未找到文件。
src/core/view/components/image/index.vue
浏览文件 @
deca0508
<
template
>
<uni-image
v-on=
"$listeners"
>
<div
ref=
"content"
:style=
"style"
/>
<img
:src=
"contentPath"
>
<v-uni-resize-sensor
v-if=
"mode === 'widthFix' || mode === 'heightFix'"
ref=
"sensor"
@
resize=
"_fixSize()"
/>
</uni-image>
</
template
>
<
script
>
function
fixNumber
(
number
)
{
// fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题
if
(
typeof
navigator
&&
navigator
.
vendor
===
'
Google Inc.
'
&&
number
>
10
)
{
number
=
Math
.
round
(
number
/
2
)
*
2
}
return
number
}
export
default
{
name
:
'
Image
'
,
props
:
{
src
:
{
type
:
String
,
default
:
''
},
mode
:
{
type
:
String
,
default
:
'
scaleToFill
'
},
// TODO 懒加载
lazyLoad
:
{
type
:
[
Boolean
,
String
],
default
:
false
}
},
data
()
{
return
{
originalWidth
:
0
,
originalHeight
:
0
,
originalStyle
:
{
width
:
''
,
height
:
''
},
contentPath
:
''
}
},
computed
:
{
ratio
()
{
return
this
.
originalWidth
&&
this
.
originalHeight
?
this
.
originalWidth
/
this
.
originalHeight
:
0
},
style
()
{
let
size
=
'
auto
'
let
position
=
''
const
repeat
=
'
no-repeat
'
switch
(
this
.
mode
)
{
case
'
aspectFit
'
:
size
=
'
contain
'
position
=
'
center center
'
break
case
'
aspectFill
'
:
size
=
'
cover
'
position
=
'
center center
'
break
case
'
widthFix
'
:
case
'
heightFix
'
:
size
=
'
100% 100%
'
break
case
'
top
'
:
position
=
'
center top
'
break
case
'
bottom
'
:
position
=
'
center bottom
'
break
case
'
center
'
:
position
=
'
center center
'
break
case
'
left
'
:
position
=
'
left center
'
break
case
'
right
'
:
position
=
'
right center
'
break
case
'
top left
'
:
position
=
'
left top
'
break
case
'
top right
'
:
position
=
'
right top
'
break
case
'
bottom left
'
:
position
=
'
left bottom
'
break
case
'
bottom right
'
:
position
=
'
right bottom
'
break
default
:
size
=
'
100% 100%
'
position
=
'
0% 0%
'
break
}
return
{
'
background-image
'
:
this
.
contentPath
?
`url("
${
this
.
contentPath
}
")`
:
'
none
'
,
'
background-position
'
:
position
,
'
background-size
'
:
size
,
'
background-repeat
'
:
repeat
}
}
},
watch
:
{
src
(
newValue
,
oldValue
)
{
this
.
_loadImage
()
},
mode
(
newValue
,
oldValue
)
{
if
(
oldValue
===
'
widthFix
'
||
oldValue
===
'
heightFix
'
)
{
this
.
_resetSize
()
}
if
(
newValue
===
'
widthFix
'
||
newValue
===
'
heightFix
'
)
{
this
.
_fixSize
()
}
}
},
mounted
()
{
this
.
originalStyle
.
width
=
this
.
$el
.
style
.
width
||
''
this
.
originalStyle
.
height
=
this
.
$el
.
style
.
height
||
''
this
.
_loadImage
()
},
beforeDestroy
()
{
this
.
_clearImage
()
},
methods
:
{
_fixSize
()
{
if
(
this
.
ratio
)
{
const
$el
=
this
.
$el
const
rect
=
$el
.
getBoundingClientRect
()
if
(
this
.
mode
===
'
widthFix
'
)
{
const
width
=
rect
.
width
if
(
width
)
{
$el
.
style
.
height
=
fixNumber
(
width
/
this
.
ratio
)
+
'
px
'
}
}
else
if
(
this
.
mode
===
'
heightFix
'
)
{
const
height
=
rect
.
height
if
(
height
)
{
$el
.
style
.
width
=
fixNumber
(
height
*
this
.
ratio
)
+
'
px
'
}
}
}
},
_resetSize
()
{
this
.
$el
.
style
.
width
=
this
.
originalStyle
.
width
this
.
$el
.
style
.
height
=
this
.
originalStyle
.
height
},
_resetData
()
{
this
.
originalWidth
=
0
this
.
originalHeight
=
0
this
.
contentPath
=
''
},
_loadImage
()
{
const
realImagePath
=
this
.
$getRealPath
(
this
.
src
)
if
(
realImagePath
)
{
const
img
=
this
.
_img
=
this
.
_img
||
new
Image
()
img
.
onload
=
$event
=>
{
this
.
_img
=
null
this
.
originalWidth
=
img
.
width
this
.
originalHeight
=
img
.
height
this
.
_fixSize
()
this
.
contentPath
=
realImagePath
this
.
$trigger
(
'
load
'
,
$event
,
{
width
:
img
.
width
,
height
:
img
.
height
})
}
img
.
onerror
=
$event
=>
{
this
.
_img
=
null
this
.
_resetData
()
// 与微信小程序保持一致,保留之前样式
// this._resetSize()
this
.
$trigger
(
'
error
'
,
$event
,
{
errMsg
:
`GET
${
this
.
src
}
404 (Not Found)`
})
}
img
.
src
=
realImagePath
}
else
{
this
.
_clearImage
()
// 与微信小程序保持一致,保留之前样式
// this._resetData()
this
.
_resetSize
()
}
},
_clearImage
()
{
const
img
=
this
.
_img
if
(
img
)
{
img
.
onload
=
null
img
.
onerror
=
null
this
.
_img
=
null
}
}
}
}
</
script
>
<
style
>
uni-image
{
width
:
320px
;
height
:
240px
;
display
:
inline-block
;
overflow
:
hidden
;
position
:
relative
;
}
uni-image
[
hidden
]
{
display
:
none
;
}
uni-image
>
div
{
width
:
100%
;
height
:
100%
;
}
uni-image
>
img
{
-webkit-touch-callout
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
;
}
uni-image
>
.uni-image-will-change
{
will-change
:
transform
;
}
</
style
>
<
template
>
<uni-image
v-on=
"$listeners"
>
<div
ref=
"content"
:style=
"style"
/>
<img
v-if=
"contentPath"
:src=
"contentPath"
>
<v-uni-resize-sensor
v-if=
"mode === 'widthFix' || mode === 'heightFix'"
ref=
"sensor"
@
resize=
"_fixSize()"
/>
</uni-image>
</
template
>
<
script
>
function
fixNumber
(
number
)
{
// fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题
if
(
typeof
navigator
&&
navigator
.
vendor
===
'
Google Inc.
'
&&
number
>
10
)
{
number
=
Math
.
round
(
number
/
2
)
*
2
}
return
number
}
export
default
{
name
:
'
Image
'
,
props
:
{
src
:
{
type
:
String
,
default
:
''
},
mode
:
{
type
:
String
,
default
:
'
scaleToFill
'
},
// TODO 懒加载
lazyLoad
:
{
type
:
[
Boolean
,
String
],
default
:
false
}
},
data
()
{
return
{
originalWidth
:
0
,
originalHeight
:
0
,
originalStyle
:
{
width
:
''
,
height
:
''
},
contentPath
:
''
}
},
computed
:
{
ratio
()
{
return
this
.
originalWidth
&&
this
.
originalHeight
?
this
.
originalWidth
/
this
.
originalHeight
:
0
},
style
()
{
let
size
=
'
auto
'
let
position
=
''
const
repeat
=
'
no-repeat
'
switch
(
this
.
mode
)
{
case
'
aspectFit
'
:
size
=
'
contain
'
position
=
'
center center
'
break
case
'
aspectFill
'
:
size
=
'
cover
'
position
=
'
center center
'
break
case
'
widthFix
'
:
case
'
heightFix
'
:
size
=
'
100% 100%
'
break
case
'
top
'
:
position
=
'
center top
'
break
case
'
bottom
'
:
position
=
'
center bottom
'
break
case
'
center
'
:
position
=
'
center center
'
break
case
'
left
'
:
position
=
'
left center
'
break
case
'
right
'
:
position
=
'
right center
'
break
case
'
top left
'
:
position
=
'
left top
'
break
case
'
top right
'
:
position
=
'
right top
'
break
case
'
bottom left
'
:
position
=
'
left bottom
'
break
case
'
bottom right
'
:
position
=
'
right bottom
'
break
default
:
size
=
'
100% 100%
'
position
=
'
0% 0%
'
break
}
return
{
'
background-image
'
:
this
.
contentPath
?
`url("
${
this
.
contentPath
}
")`
:
'
none
'
,
'
background-position
'
:
position
,
'
background-size
'
:
size
,
'
background-repeat
'
:
repeat
}
}
},
watch
:
{
src
(
newValue
,
oldValue
)
{
this
.
_loadImage
()
},
mode
(
newValue
,
oldValue
)
{
if
(
oldValue
===
'
widthFix
'
||
oldValue
===
'
heightFix
'
)
{
this
.
_resetSize
()
}
if
(
newValue
===
'
widthFix
'
||
newValue
===
'
heightFix
'
)
{
this
.
_fixSize
()
}
}
},
mounted
()
{
this
.
originalStyle
.
width
=
this
.
$el
.
style
.
width
||
''
this
.
originalStyle
.
height
=
this
.
$el
.
style
.
height
||
''
this
.
_loadImage
()
},
beforeDestroy
()
{
this
.
_clearImage
()
},
methods
:
{
_fixSize
()
{
if
(
this
.
ratio
)
{
const
$el
=
this
.
$el
const
rect
=
$el
.
getBoundingClientRect
()
if
(
this
.
mode
===
'
widthFix
'
)
{
const
width
=
rect
.
width
if
(
width
)
{
$el
.
style
.
height
=
fixNumber
(
width
/
this
.
ratio
)
+
'
px
'
}
}
else
if
(
this
.
mode
===
'
heightFix
'
)
{
const
height
=
rect
.
height
if
(
height
)
{
$el
.
style
.
width
=
fixNumber
(
height
*
this
.
ratio
)
+
'
px
'
}
}
}
},
_resetSize
()
{
this
.
$el
.
style
.
width
=
this
.
originalStyle
.
width
this
.
$el
.
style
.
height
=
this
.
originalStyle
.
height
},
_resetData
()
{
this
.
originalWidth
=
0
this
.
originalHeight
=
0
this
.
contentPath
=
''
},
_loadImage
()
{
const
realImagePath
=
this
.
$getRealPath
(
this
.
src
)
if
(
realImagePath
)
{
const
img
=
this
.
_img
=
this
.
_img
||
new
Image
()
img
.
onload
=
$event
=>
{
this
.
_img
=
null
this
.
originalWidth
=
img
.
width
this
.
originalHeight
=
img
.
height
this
.
_fixSize
()
this
.
contentPath
=
realImagePath
this
.
$trigger
(
'
load
'
,
$event
,
{
width
:
img
.
width
,
height
:
img
.
height
})
}
img
.
onerror
=
$event
=>
{
this
.
_img
=
null
this
.
_resetData
()
// 与微信小程序保持一致,保留之前样式
// this._resetSize()
this
.
$trigger
(
'
error
'
,
$event
,
{
errMsg
:
`GET
${
this
.
src
}
404 (Not Found)`
})
}
img
.
src
=
realImagePath
}
else
{
this
.
_clearImage
()
// 与微信小程序保持一致,保留之前样式
// this._resetData()
this
.
_resetSize
()
}
},
_clearImage
()
{
const
img
=
this
.
_img
if
(
img
)
{
img
.
onload
=
null
img
.
onerror
=
null
this
.
_img
=
null
}
}
}
}
</
script
>
<
style
>
uni-image
{
width
:
320px
;
height
:
240px
;
display
:
inline-block
;
overflow
:
hidden
;
position
:
relative
;
}
uni-image
[
hidden
]
{
display
:
none
;
}
uni-image
>
div
{
width
:
100%
;
height
:
100%
;
}
uni-image
>
img
{
-webkit-touch-callout
:
none
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
opacity
:
0
;
}
uni-image
>
.uni-image-will-change
{
will-change
:
transform
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录