更新记录
1.0.8(2023-02-22) 下载此版本
修复问题
1.0.7(2023-02-22) 下载此版本
修复问题
1.0.6(2023-02-22) 下载此版本
修复问题
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
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>