| | |
| | | :close-on-press-escape="false" |
| | | > |
| | | <el-row justify="end"> |
| | | <el-text v-if="onContextMenu != undefined" size="small" type="info">{{ |
| | | `(${contextMenuStr})` |
| | | }}</el-text> |
| | | <el-space v-if="onContextMenu != undefined"> |
| | | <el-switch |
| | | v-model="useContextMenu" |
| | | inline-prompt |
| | | active-text="开" |
| | | inactive-text="关" |
| | | /> |
| | | <el-text size="small" type="info"> |
| | | {{ `(${contextMenuStr})` }} |
| | | </el-text> |
| | | </el-space> |
| | | |
| | | <div v-if="!readonly"> |
| | | <el-text size="small" type="info" class="m-r-8" |
| | | >最多选择{{ maxSelect }}张图片</el-text |
| | |
| | | </el-row> |
| | | |
| | | <div class="center"> |
| | | <el-tabs v-if="typeList.length > 0" v-model="activeId" type="card"> |
| | | <el-tab-pane |
| | | v-for="item in typeList" |
| | | :key="item.typeId" |
| | | :label=" |
| | | item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')' |
| | | " |
| | | :name="item.typeId" |
| | | <el-scrollbar class="scrollbar-flex-content"> |
| | | <el-tabs |
| | | v-if="typeList.length > 0" |
| | | v-model="activeId" |
| | | type="card" |
| | | stretch |
| | | > |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <el-tab-pane |
| | | v-for="item in typeList" |
| | | :key="item.typeId" |
| | | :label=" |
| | | item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')' |
| | | " |
| | | :name="item.typeId" |
| | | > |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-scrollbar> |
| | | <el-scrollbar height="70vh"> |
| | | <div |
| | | v-if="typeImgMap.get(activeId) && typeImgMap.get(activeId).length > 0" |
| | |
| | | }, |
| | | contextMenuStr: { |
| | | type: String, |
| | | default: '右键点击图片触发额外操作' |
| | | default: '右键点击图片移动' |
| | | } |
| | | }); |
| | | |
| | |
| | | const activeId = ref(''); |
| | | |
| | | const selectedImgUrlList = ref([]); |
| | | |
| | | const useContextMenu = ref(false); |
| | | |
| | | let loadedImgCount = ref(0); |
| | | // 加载状态 |
| | |
| | | emit('update:dialogVisible', false); |
| | | } |
| | | |
| | | // 图片右键点击时间 |
| | | // 图片右键点击事件 |
| | | function showContextMenu(event, index) { |
| | | if (props.onContextMenu) { |
| | | if (props.onContextMenu && useContextMenu.value) { |
| | | event.preventDefault(); |
| | | props.onContextMenu(event, activeId.value, index); |
| | | } |
| | |
| | | ); |
| | | </script> |
| | | <style scoped> |
| | | .scrollbar-flex-content { |
| | | display: flex; |
| | | width: 100%; |
| | | } |
| | | .center { |
| | | display: flex; |
| | | flex-direction: column; |