From ef525256510796cc684b4323cacf3b6aa3b501c6 Mon Sep 17 00:00:00 2001 From: lzp Date: Tue, 31 Mar 2026 15:45:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=87=E4=BB=A4?= =?UTF-8?q?=E5=BD=92=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/depth-header-tools.vue | 10 +++++-- .../manager/AISelectboxToolManager.ts | 4 +-- src/directives/clidk-besides.js | 27 +++++++++++++++++++ .../ellispsis.ts => directives/ellispsis.js} | 18 ++++++------- src/directives/index.js | 9 +++++++ src/directives/loadimg.js | 16 +++++++++++ src/main.ts | 20 ++------------ 7 files changed, 72 insertions(+), 32 deletions(-) create mode 100644 src/directives/clidk-besides.js rename src/{utils/ellispsis.ts => directives/ellispsis.js} (72%) create mode 100644 src/directives/index.js create mode 100644 src/directives/loadimg.js diff --git a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue index 2926d68..83c8bcd 100644 --- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue +++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue @@ -13,10 +13,16 @@ > - + -
+
diff --git a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts index fd3ccb9..d31cf97 100644 --- a/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts @@ -199,8 +199,8 @@ export class AISelectboxToolManager { if (!this.isDragging) return; this.isDragging = false; const object = this.indicatorObject.toJSON("evented") - // if (object.width === 0) object.width = 100 - // if (object.height === 0) object.height = 100 + if (object.width === 0 || object.height === 0) return + this.clearIndicatorObject() this.canvasManager.canvas.renderAll() diff --git a/src/directives/clidk-besides.js b/src/directives/clidk-besides.js new file mode 100644 index 0000000..503b4d5 --- /dev/null +++ b/src/directives/clidk-besides.js @@ -0,0 +1,27 @@ +// 点击外部区域触发事件 +// 用法：v-clidk-besides="() => {}" +// 说明：点击外部区域触发事件，不包括点击元素本身 +// 注意：点击元素本身或者属性bind-id相同元素不会触发事件 +export default { + name: 'clidk-besides', + mounted(el, binding) { + console.log("mounted", el, binding); + const call = binding.value + const id = el.getAttribute("bind-id"); + window.addEventListener("touchstart", fun, true); + window.addEventListener("mousedown", fun, true); + function fun(e) { + var k = true; + iterator(e.target); + if (k) call && call(); + function iterator(el) { + if (!el || el.nodeName == "#document") return; + if (el.getAttribute("bind-id") == id) { + k = false; + } else { + iterator(el.parentNode); + } + } + } + }, +}; \ No newline at end of file diff --git a/src/utils/ellispsis.ts b/src/directives/ellispsis.js similarity index 72% rename from src/utils/ellispsis.ts rename to src/directives/ellispsis.js index 23f6ec8..9fbd26a 100644 --- a/src/utils/ellispsis.ts +++ b/src/directives/ellispsis.js @@ -1,11 +1,10 @@ -import type { Directive } from 'vue' /** * 多行文本省略指令（悬浮显示完整内容) * @directive v-ellipsis * @param {number} [value=3] - 超过value行数时显示省略号,不传参数默认为3 */ -const applyStyles = (el: HTMLElement, binding: any) => { +const applyStyles = (el, binding) => { const lines = typeof binding.value === 'number' && binding.value > 0 ? binding.value : 3 el.style.display = '-webkit-box' @@ -16,7 +15,7 @@ const applyStyles = (el: HTMLElement, binding: any) => { el.style.maxHeight = `${lines}lh` } -const checkTruncated = (el: HTMLElement) => { +const checkTruncated = (el) => { const isTruncated = el.scrollHeight > el.clientHeight + 1 if (isTruncated) { el.title = el.textContent?.trim() || '' @@ -25,14 +24,15 @@ const checkTruncated = (el: HTMLElement) => { } } -const vEllipsis: Directive = { +export default { + name: 'ellipsis', mounted(el, binding) { applyStyles(el, binding) checkTruncated(el) const ro = new ResizeObserver(() => checkTruncated(el)) - ro.observe(el) - ;(el as any)._ellipsisObserver = ro + ro.observe(el); + el._ellipsisObserver = ro }, updated(el, binding) { @@ -41,12 +41,10 @@ const vEllipsis: Directive = { }, unmounted(el) { - const ro = (el as any)._ellipsisObserver + const ro = el._ellipsisObserver if (ro) { ro.disconnect() - delete (el as any)._ellipsisObserver + delete el._ellipsisObserver } } } - -export default vEllipsis diff --git a/src/directives/index.js b/src/directives/index.js new file mode 100644 index 0000000..d189b48 --- /dev/null +++ b/src/directives/index.js @@ -0,0 +1,9 @@ +export default { + install(app) { + const directivesList = import.meta.glob('./*.js', { eager: true }); + // 遍历指令文件实现自动注册 + Object.keys(directivesList).forEach(key => { + app.directive(directivesList[key].default.name, directivesList[key].default); + }); + } +}; \ No newline at end of file diff --git a/src/directives/loadimg.js b/src/directives/loadimg.js new file mode 100644 index 0000000..ef3ede3 --- /dev/null +++ b/src/directives/loadimg.js @@ -0,0 +1,16 @@ +// 加载图片 +export default { + name: 'loadimg', + mounted(el, binding) { + const src = binding.value + if (el.src === src) return + const img = new Image() + img.src = src + img.onload = () => { + el.src = src + } + img.onerror = () => { + console.log('图片加载失败:', src) + } + }, +}; \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index a112d10..6169d44 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,7 @@ import 'normalize.css' import './assets/css/style.css' import SvgIcon from "@/components/SvgIcon/index.vue"; import "virtual:svg-icons-register"; +import directives from "./directives/index.js"; import i18n from "./lang/index"; import flexible from "./utils/flexible.js"; @@ -17,32 +18,15 @@ import 'element-plus/dist/index.css' import ignoredWarning from './ignoredWarning' -import vEllipsis from './utils/ellispsis' - - const app = createApp(App) ignoredWarning(app) -app.directive('ellipsis', vEllipsis) app.use(router) + .use(directives) .use(ElementPlus) .use(store) .component("SvgIcon", SvgIcon) .use(i18n) .mount('#app') -const vLoadimg = (el, binding) => { - const src = binding.value - if (el.src === src) return - const img = new Image() - img.src = src - img.onload = () => { - el.src = src - } - img.onerror = () => { - console.log('图片加载失败:', src) - } -} -// 注册 -app.directive('loadimg', vLoadimg) flexible();