更新记录
1.0.8(2023-02-22)
修复问题
1.0.7(2023-02-22)
修复问题
1.0.6(2023-02-22)
修复问题
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用说明
组件参数
属性名 |
类型 |
默认值 |
可选值 |
说明 |
rate |
Number |
String |
0.7 |
异常状态的文字显示比例,0.5为图片宽度的50% |
radis |
String |
|
|
图片圆角,等同于borderRadis |
src |
String |
|
|
图片地址,等同于image组件的src |
mode |
String |
|
|
图片模式,等同于image组件的mode |
preview |
Boolean |
false |
|
点击图片是否能预览 |
previewList |
Array |
[src] |
|
图片预览列表,等同于uni.previewImage的urls属性 |
previewIndex |
Number |
0 |
|
图片预览初始下标,等同于uni.previewImage的current属性 |
animation |
Boolean |
true |
|
是否启用loading效果 |
width |
String |
100% |
|
图片宽度,等同于css的width |
height |
String |
|
|
图片高度,等同于css的height |
lazyLoad |
Boolean |
true |
|
图片懒加载,等同于image的lazyLoad |
bg |
String |
#f5f5f5 |
|
图片背景色 |
boxHidden |
Boolean |
true |
|
组件overflow模式,true为hidden,false为visible |
快速上手
插件使用方式十分简单 只需要将image组件替换为该组件即可
例如:
//原图片
<image src="xxx.jpg" mode="widthFix" class="abc"></image>
// 使用组件
<daxiang-img src="xxx.jpg" mode="widthFix" class="abc"></daxiang-img>
扩展功能示例
图片点击预览
场景示例:Banner轮播图需要预览功能
<swiper>
<swiper-item v-for="(item,index) in bannerList" :key="index">
<daxiang-img :src="item.url" mode="aspectFill" preview :previewList="bannerList.map(v=>v.url)" :previewIndex="index"></daxiang-img>
</swiper-item>
</swiper>