Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
luomor
uni-app
提交
5b79c8e9
uni-app
项目概览
luomor
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
5b79c8e9
编写于
8月 22, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'dev' into alpha
上级
82df60eb
d7f5b5f4
变更
3
展开全部
隐藏空白更改
内联
并排
Showing
3 changed file
with
119 addition
and
89 deletion
+119
-89
docs/component/image.md
docs/component/image.md
+1
-1
packages/vue-cli-plugin-uni/packages/uni-cloud/dist/index.js
packages/vue-cli-plugin-uni/packages/uni-cloud/dist/index.js
+1
-1
src/core/view/components/image/index.vue
src/core/view/components/image/index.vue
+117
-87
未找到文件。
docs/component/image.md
浏览文件 @
5b79c8e9
...
...
@@ -33,7 +33,7 @@ mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
|缩放|aspectFit|保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。|
|缩放|aspectFill|保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。|
|缩放|widthFix|宽度不变,高度自动变化,保持原图宽高比不变|
|缩放|heightFix|高度不变,宽度自动变化,保持原图宽高比不变
**
微信小程序 2.10.3 支持
**
|
|缩放|heightFix|高度不变,宽度自动变化,保持原图宽高比不变
**
App 和 H5 平台 2.8.9+ 支持、微信小程序需要基础库 2.10.3
**
|
|裁剪|top|不缩放图片,只显示图片的顶部区域|
|裁剪|bottom|不缩放图片,只显示图片的底部区域|
|裁剪|center|不缩放图片,只显示图片的中间区域|
...
...
packages/vue-cli-plugin-uni/packages/uni-cloud/dist/index.js
浏览文件 @
5b79c8e9
此差异已折叠。
点击以展开。
src/core/view/components/image/index.vue
浏览文件 @
5b79c8e9
...
...
@@ -2,17 +2,25 @@
<uni-image
v-on=
"$listeners"
>
<div
ref=
"content"
:style=
"
modeS
tyle"
:style=
"
s
tyle"
/>
<img
:src=
"
realImage
Path"
>
<img
:src=
"
content
Path"
>
<v-uni-resize-sensor
v-if=
"mode === 'widthFix'"
v-if=
"mode === 'widthFix'
|| mode === 'heightFix'
"
ref=
"sensor"
@
resize=
"_
resize
"
@
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
:
{
...
...
@@ -34,17 +42,15 @@ export default {
return
{
originalWidth
:
0
,
originalHeight
:
0
,
availHeight
:
''
originalStyle
:
{
width
:
''
,
height
:
''
},
contentPath
:
''
}
},
computed
:
{
ratio
()
{
return
this
.
originalWidth
&&
this
.
originalHeight
?
this
.
originalWidth
/
this
.
originalHeight
:
0
},
realImagePath
()
{
return
this
.
$getRealPath
(
this
.
src
)
},
modeStyle
()
{
style
()
{
let
size
=
'
auto
'
let
position
=
''
const
repeat
=
'
no-repeat
'
...
...
@@ -59,6 +65,7 @@ export default {
position
=
'
center center
'
break
case
'
widthFix
'
:
case
'
heightFix
'
:
size
=
'
100% 100%
'
break
case
'
top
'
:
...
...
@@ -94,117 +101,140 @@ export default {
break
}
return
`background-position:
${
position
}
;background-size:
${
size
}
;background-repeat:
${
repeat
}
;`
return
{
'
background-image
'
:
this
.
contentPath
?
`url("
${
this
.
contentPath
}
")`
:
'
none
'
,
'
background-position
'
:
position
,
'
background-size
'
:
size
,
'
background-repeat
'
:
repeat
}
}
},
watch
:
{
src
(
newValue
,
oldValue
)
{
this
.
_setContentImage
()
this
.
_loadImage
()
},
mode
(
newValue
,
oldValue
)
{
if
(
oldValue
===
'
widthFix
'
)
{
this
.
$el
.
style
.
height
=
this
.
availHeight
if
(
oldValue
===
'
widthFix
'
||
oldValue
===
'
heightFix
'
)
{
this
.
_resetSize
()
}
if
(
newValue
===
'
widthFix
'
&&
this
.
ratio
)
{
if
(
newValue
===
'
widthFix
'
||
newValue
===
'
heightFix
'
)
{
this
.
_fixSize
()
}
}
},
mounted
()
{
this
.
availHeight
=
this
.
$el
.
style
.
height
||
''
this
.
_setContentImage
()
if
(
!
this
.
realImagePath
)
{
return
}
this
.
originalStyle
.
width
=
this
.
$el
.
style
.
width
||
''
this
.
originalStyle
.
height
=
this
.
$el
.
style
.
height
||
''
this
.
_loadImage
()
},
beforeDestroy
()
{
this
.
_clearImage
()
},
methods
:
{
_resize
()
{
if
(
this
.
mode
===
'
widthFix
'
)
{
this
.
_fixSize
()
}
},
_fixSize
()
{
const
elWidth
=
this
.
_getWidth
()
if
(
elWidth
)
{
let
height
=
elWidth
/
this
.
ratio
// fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题
if
(
typeof
navigator
&&
navigator
.
vendor
===
'
Google Inc.
'
&&
height
>
10
)
{
height
=
Math
.
round
(
height
/
2
)
*
2
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
'
}
}
this
.
$el
.
style
.
height
=
height
+
'
px
'
}
},
_setContentImage
()
{
this
.
$refs
.
content
.
style
.
backgroundImage
=
this
.
src
?
`url("
${
this
.
realImagePath
}
")`
:
'
none
'
_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
_self
=
this
const
img
=
new
Image
()
img
.
onload
=
function
(
$event
)
{
_self
.
originalWidth
=
this
.
width
_self
.
originalHeight
=
this
.
height
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
if
(
_self
.
mode
===
'
widthFix
'
)
{
_self
.
_fixSize
()
}
this
.
_fixSize
()
_self
.
$trigger
(
'
load
'
,
$event
,
{
width
:
this
.
width
,
height
:
this
.
height
})
}
img
.
onerror
=
function
(
$event
)
{
_self
.
$trigger
(
'
error
'
,
$event
,
{
errMsg
:
`GET
${
_self
.
src
}
404 (Not Found)`
})
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
()
}
img
.
src
=
this
.
realImagePath
},
_
getWidth
()
{
const
computedStyle
=
window
.
getComputedStyle
(
this
.
$el
)
const
borderWidth
=
(
parseFloat
(
computedStyle
.
borderLeftWidth
,
10
)
||
0
)
+
(
parseFloat
(
computedStyle
.
borderRightWidth
,
10
)
||
0
)
const
paddingWidth
=
(
parseFloat
(
computedStyle
.
paddingLeft
,
10
)
||
0
)
+
(
parseFloat
(
computedStyle
.
paddingRight
,
10
)
||
0
)
return
this
.
$el
.
offsetWidth
-
borderWidth
-
paddingWidth
_
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
{
width
:
320px
;
height
:
240px
;
display
:
inline-block
;
overflow
:
hidden
;
position
:
relative
;
}
uni-image
[
hidden
]
{
display
:
none
;
}
uni-image
[
hidden
]
{
display
:
none
;
}
uni-image
>
div
{
width
:
100%
;
height
:
100%
;
}
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
>
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
;
}
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录