| | |
| | | destroy-on-close |
| | | :close-on-press-escape="false" |
| | | > |
| | | <!-- <div class="main"> --> |
| | | <el-row justify="end" v-if="!readonly"> |
| | | <el-text size="small" type="info" class="m-r-8" |
| | | >最多选择{{ maxSelect }}张图片</el-text |
| | | > |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click="handleSubmit" |
| | | :disabled="selectedImgUrlList.length == 0" |
| | | >确定</el-button |
| | | > |
| | | <el-button size="small" type="primary" @click="handleCancel" |
| | | >取消</el-button |
| | | > |
| | | <el-row justify="end"> |
| | | <el-text v-if="onContextMenu != undefined" size="small" type="info">{{ |
| | | `(${contextMenuStr})` |
| | | }}</el-text> |
| | | <div v-if="!readonly"> |
| | | <el-text size="small" type="info" class="m-r-8" |
| | | >最多选择{{ maxSelect }}张图片</el-text |
| | | > |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | @click="handleSubmit" |
| | | :disabled="selectedImgUrlList.length == 0" |
| | | >确定</el-button |
| | | > |
| | | <el-button size="small" type="primary" @click="handleCancel" |
| | | >取消</el-button |
| | | > |
| | | </div> |
| | | </el-row> |
| | | |
| | | <div class="center"> |
| | |
| | | :class="[img.isSelect ? 'selected' : 'noActive', 'image']" |
| | | fit="cover" |
| | | :src="img.url" |
| | | :preview-src-list="readonly ? typeImgMap.get(activeId).map((v) => v.url) : []" |
| | | :preview-src-list=" |
| | | readonly ? typeImgMap.get(activeId).map((v) => v.url) : [] |
| | | " |
| | | :initial-index="i" |
| | | @contextmenu="(e) => showContextMenu(e, i)" |
| | | @click="onSelect(img, i)" |
| | | @load="onOneImgLoadSuccess(img)" |
| | | @error="onOneImgLoadError(img)" |
| | |
| | | </el-row> |
| | | </el-scrollbar> |
| | | </div> |
| | | <!-- </div> --> |
| | | </el-dialog> |
| | | </template> |
| | | <script setup> |
| | |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | defaultFile: { |
| | | type: Array, |
| | | default: () => [] |
| | | }, |
| | | // 图片可选数量,当传入数字时,代表图片数量 |
| | | maxSelect: { |
| | | type: Number, |
| | | default: 3 |
| | | }, |
| | | // 图片右键点击事件 |
| | | onContextMenu: { |
| | | type: Function |
| | | }, |
| | | contextMenuStr: { |
| | | type: String, |
| | | default: '右键点击图片触发额外操作' |
| | | } |
| | | }); |
| | | |
| | | const emit = defineEmits(['submit', 'cancel', 'update:dialogVisible']); |
| | | |
| | | const activeId = ref(''); |
| | | // const typeImgMap = ref(new Map()); |
| | | |
| | | const selectedImgUrlList = ref([]); |
| | | |
| | | let loadedImgCount = ref(0); |
| | |
| | | } |
| | | } |
| | | function handleOpen() { |
| | | // if (props.typeImgMap.get(activeId.value) == undefined) { |
| | | // return; |
| | | // } |
| | | // props.typeImgMap.get(activeId.value).forEach((i) => { |
| | | // if (i.isSelect == true) { |
| | | // return; |
| | | // } |
| | | // props.defaultFile.forEach((imgItem) => { |
| | | // if (imgItem.url == i.url) { |
| | | // i.isSelect = true; |
| | | // selectedImgUrlList.value.push(i); |
| | | // } |
| | | // }); |
| | | // }); |
| | | emit('update:dialogVisible', true); |
| | | } |
| | | function handleClose() { |
| | |
| | | emit('update:dialogVisible', false); |
| | | } |
| | | |
| | | // 图片右键点击时间 |
| | | function showContextMenu(event, index) { |
| | | if (props.onContextMenu) { |
| | | event.preventDefault(); |
| | | props.onContextMenu(event, activeId.value, index); |
| | | } |
| | | } |
| | | |
| | | watch( |
| | | () => props.typeList, |
| | | (nV, oV) => { |
| | |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | // watch( |
| | | // () => props.defaultFile, |
| | | // (nV, oV) => { |
| | | // if (props.typeImgMap.get(activeId.value) == undefined) { |
| | | // return; |
| | | // } |
| | | // props.typeImgMap.get(activeId.value).forEach((i) => { |
| | | // if (i.isSelect == true) { |
| | | // return; |
| | | // } |
| | | // nV.forEach((imgItem) => { |
| | | // if (imgItem.url == i.url) { |
| | | // i.isSelect = true; |
| | | // selectedImgUrlList.value.push(i); |
| | | // } |
| | | // }); |
| | | // }); |
| | | // }, |
| | | // { deep: true, immediate: true } |
| | | // ); |
| | | |
| | | // watch( |
| | | // () => props.typeImgMap, |
| | | // (newMap, oldMap) => { |
| | | // if (newMap.get(activeId.value) == undefined) { |
| | | // return; |
| | | // } |
| | | // newMap.get(activeId.value).forEach((i) => { |
| | | // if (i.isSelect == true) { |
| | | // return; |
| | | // } |
| | | // props.defaultFile.forEach((imgItem) => { |
| | | // if (imgItem.url == i.url) { |
| | | // i.isSelect = true; |
| | | // selectedImgUrlList.value.push(i); |
| | | // } |
| | | // }); |
| | | // }); |
| | | // }, |
| | | // { immediate: true } |
| | | // ); |
| | | </script> |
| | | <style scoped> |
| | | .center { |