更新记录
v1.1.2(2023-12-06) 下载此版本
1、图片上传样式优化、照片低于1m
v1.1.1(2023-11-09) 下载此版本
代码包更新
v1.1.0(2023-11-09) 下载此版本
修改插件包引用文件
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.5.5 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
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 |