解释:上传图片组件,支持大图、多图模式,可配置图片个数、大小限制等。
属性名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
theme | String | 否 | default | 主题:default 为小图,large 为大图模式 |
pictureList | Array | 否 | [] | 上传图片地址列表 |
pictureLimit | Number | 否 | 9 | 上传图片个数上限 |
showPreview | Boolean | 否 | false | 是否支持预览 |
showTips | Boolean | 否 | false | 是否展示提示信息 |
pictureSizeLimit | Number | 否 | 1e7 | 单张图片大小限制 |
pictureSelectLimit | Number | 否 | 2 | 从本地相册中选择图片个数 |
picture-container-class | String | 否 | 整个容器的外部样式 | |
picture-area-class | String | 否 | 放置图片缩略图区域的外部样式 | |
close-class | String | 否 | 清除按钮的外部样式 | |
tips-class | String | 否 | 每个图片信息的外部样式 | |
tips-area-class | String | 否 | 校验失败提示的外部样式 | |
picture-item-class | String | 否 | 每个图片的外部样式 | |
add-picture-class | String | 否 | 添加按钮的外部样式 | |
delimage | EventHandle | 否 | 删除图片,触发的绑定事件 | |
chooseimage | EventHandle | 否 | 选择图片,触发的绑定事件 |
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
{{item.titleBar}}
picture-container-class="image-uploader-container"
picture-item-class="image-uploader-item"
theme="{{item.theme}}"
data-index="{{index}}"
bind:chooseimage="chooseImage"
bind:delimage="delImage"
picture-list="{{item.images}}"
picture-limit="{{item.pictureLimit}}"
picture-select-limit="{{item.pictureSelectLimit}}"
showTips="true"/>
沉浸式主题
设计指南
上传图片个数上限(pictureLimit),和从本地相册中选择图片个数(pictureSelectLimit)需保持一致;
自定义图片上传器主题(theme)时,若图片类型为卡片或证照,建议使用大图模式。
正确
上传证照素材时使用大图模式,图片清晰完整
错误
上传证照素材时使用小图模式,图片展示不全,影响识别
网站栏目:创新互联百度小程序教程:image-uploader图片上传器
网页路径:http://www.csdahua.cn/qtweb/news39/324239.html
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网