feat(二维码): 添加删除按钮并重构二维码元素结构

- 为二维码元素添加删除按钮,仅在选中时显示
- 重构二维码元素结构,将图片包裹在容器div中
- 调整透明度设置逻辑以匹配新结构
- 防止删除按钮触发拖拽事件
This commit is contained in:
Zhukj
2026-04-25 17:53:22 +08:00
parent c7963cec6e
commit 4ee95df792
2 changed files with 97 additions and 13 deletions

View File

@@ -119,21 +119,63 @@
const container = document.getElementById('imageContainer');
const rect = container.getBoundingClientRect();
const img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
img.className = 'qr-item';
img.dataset.type = 'qrcode';
img.style.cssText = `
// 创建二维码容器
const wrapper = document.createElement('div');
wrapper.className = 'qr-item';
wrapper.dataset.type = 'qrcode';
wrapper.style.cssText = `
position: absolute;
width: ${CONFIG.DEFAULT_SIZE}px;
height: ${CONFIG.DEFAULT_SIZE}px;
opacity: 1;
left: ${(rect.width / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
top: ${(rect.height / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
`;
container.appendChild(img);
makeDraggable(img);
selectQR(img);
// 创建二维码图片
const img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
img.style.cssText = `
width: 100%;
height: 100%;
opacity: 1;
display: block;
`;
// 创建删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.className = 'qr-delete-btn';
deleteBtn.innerHTML = '×';
deleteBtn.title = '删除二维码';
deleteBtn.type = 'button';
// 删除按钮点击事件
deleteBtn.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
// 删除二维码元素
wrapper.remove();
// 清除选中状态
if (state.selectedQR === wrapper) {
state.selectedQR = null;
hideQRTools();
if (elements.editorToolbar) {
elements.editorToolbar.classList.remove('active');
}
}
// 保存状态
saveState();
return false;
};
wrapper.appendChild(img);
wrapper.appendChild(deleteBtn);
container.appendChild(wrapper);
makeDraggable(wrapper);
selectQR(wrapper);
closeModal();
saveState();
@@ -187,7 +229,8 @@
function syncToolbarValues() {
if (!state.selectedQR) return;
const opacity = parseFloat(state.selectedQR.style.opacity) || 1;
const img = state.selectedQR.querySelector('img');
const opacity = img ? (parseFloat(img.style.opacity) || 1) : 1;
const size = parseInt(state.selectedQR.style.width) || CONFIG.DEFAULT_SIZE;
if (elements.qrOpacitySlider) {
@@ -222,7 +265,10 @@
function updateOpacity(value) {
if (!state.selectedQR) return;
state.selectedQR.style.opacity = value / 100;
const img = state.selectedQR.querySelector('img');
if (img) {
img.style.opacity = value / 100;
}
elements.qrOpacityValue.textContent = value + '%';
}
@@ -278,16 +324,24 @@
}
}
// 鼠标事件
// 鼠标事件 - 排除删除按钮
el.addEventListener('mousedown', (e) => {
// 如果点击的是删除按钮,不处理拖拽
if (e.target.closest('.qr-delete-btn')) {
return;
}
e.preventDefault();
e.stopPropagation();
selectQR(el);
startDrag(e.clientX, e.clientY);
});
// 触摸事件
// 触摸事件 - 排除删除按钮
el.addEventListener('touchstart', (e) => {
// 如果触摸的是删除按钮,不处理拖拽
if (e.target.closest('.qr-delete-btn')) {
return;
}
e.preventDefault();
e.stopPropagation();
selectQR(el);