更新记录
v1.1.2(2023-12-06) 下载此版本
1、图片上传样式优化、照片低于1m
v1.1.1(2023-11-09) 下载此版本
代码包更新
v1.1.0(2023-11-09) 下载此版本
修改插件包引用文件
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
imageadd-water --图片添加水印组件
按需配置,自由度较高,新手可以上手 遇到问题请留言 如果觉得组件不错,给五星鼓励鼓励咯!
使用
复制代码<template>
<view class="container">
<photoList
:value="baseFormData.inspectionCustodyWorkLogDetailBoList[index].imagelist"
:imagesLists="baseFormData.inspectionCustodyWorkLogDetailBoList[index].imagelist"
:limit="9"
:index="index"
:label="水印文字"
@listIndex="getIndex"
@list="imageList"
/>
</view>
</template>
<script>
import photoList from '@/pages/public/photoList/photoList.vue'
export default {
components: {
photoList,
},
data(){
return{
// 基础表单数据
baseFormData: {
inspectionCustodyWorkLogDetailBoList: [],
},
}
},
methods:{
//获取数组下标
getIndex(index){
this.inde=index
},
async imageList(val){
await this.getIndex()
this.baseFormData.inspectionCustodyWorkLogDetailBoList[this.inde].imagelist=val
},
}
}
</script>
参数
imageadd-water Props
可选参数属性列表
参数名 | 说明 | 类型 | 是否必填 | 默认值 | 可选值 |
---|---|---|---|---|---|
imagesLists | 父组件图片数组 | Array | 是 | ||
limit | 限制张数 | Number | 是 | ||
index | 动态表单下标,单表可以不使用 | String | 否 | ||
label | 添加水印的文字 | String | 否 |
Event 事件
事件名 | 说明 | 类型 | 回调参数 |
---|---|---|---|
@listIndex | 动态表单的下标数据 | emit | String |
@list | 获取到的图片数组 | emit | array |
图片上传未限制大小,会出现添加水印放不下,最小在400px左右,需要添加限制条件。