画布双击添加内部图片

This commit is contained in:
李志鹏
2025-11-11 10:13:59 +08:00
parent 4365b810db
commit 5f3c4b5ac9
4 changed files with 49 additions and 21 deletions

View File

@@ -26,16 +26,17 @@
:key="index"
class="image-item"
@click="handleImageClick(item)"
@dblclick="handleImageDoubleClick(item)"
>
<div class="image-wrapper">
<img
v-lazy="item.url"
:alt="item.name || '图片'"
:alt="item.name"
@error="handleImageError"
loading="lazy"
/>
<div class="image-overlay">
<span class="image-name">{{ item.name || '未命名' }}</span>
<span class="image-name">{{ item.name }}</span>
</div>
</div>
<img class="selected-icon image-select" src="@/assets/images/icon/selected.png" v-show="selectList.includes(item.url)">
@@ -48,7 +49,6 @@
<!-- 加载状态 -->
<div v-if="loading && list.length > 0" class="loading-state">
<div class="loading-spinner"></div>
<p>加载中...</p>
</div>
<!-- 空状态 -->
@@ -279,6 +279,14 @@ const handleImageClick = item => {
}
}
// 处理图片双击
const handleImageDoubleClick = item => {
selectList.value = [item.url]
confirm()
}
// 处理分类切换
const handleChangeCategory = category => {
// console.log('handleChangeCategory',category)
@@ -307,6 +315,7 @@ const confirm = () => {
emitData = selectList.value
}
emits('select', emitData)
selectList.value = []
showPanel.value = false
}