更新记录

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问