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();