1 files changed, 27 insertions, 19 deletions

diff --git a/src/client/directives/size.ts b/src/client/directives/size.ts
index dbe26640b9..a72a97abcc 100644
--- a/src/client/directives/size.ts
+++ b/src/client/directives/size.ts
@@ -1,11 +1,11 @@
+import { Directive } from 'vue';
+
+//const observers = new Map<Element, ResizeObserver>();
+
 export default {
-	inserted(src, binding, vn) {
+	mounted(src, binding, vn) {
 		const query = binding.value;
 
-		// TODO: 要素をもらうというよりはカスタム幅算出関数をもらうようにしてcalcで都度呼び出して計算するようにした方が柔軟そう
-		// その場合はunbindの方も改修することを忘れずに
-		const el = query.el ? query.el() : src;
-
 		const addClass = (el: Element, cls: string) => {
 			el.classList.add(cls);
 		};
@@ -15,7 +15,10 @@ export default {
 		};
 
 		const calc = () => {
-			const width = el.clientWidth;
+			const width = src.clientWidth;
+
+			// 要素が(一時的に)DOMに存在しないときは計算スキップ
+			if (width === 0) return;
 
 			if (query.max) {
 				for (const v of query.max) {
@@ -39,22 +42,27 @@ export default {
 
 		calc();
 
-		vn.context.$on('hook:activated', calc);
+		window.addEventListener('resize', calc);
 
-		const ro = new ResizeObserver((entries, observer) => {
-			calc();
-		});
+		// Vue3では使えなくなった
+		// 無くても大丈夫か...？
+		// TODO: ↑大丈夫じゃなかったので解決策を探す
+		//vn.context.$on('hook:activated', calc);
 
-		ro.observe(el);
+		//const ro = new ResizeObserver((entries, observer) => {
+		//	calc();
+		//});
 
-		el._ro_ = ro;
-	},
-
-	unbind(src, binding, vn) {
-		const query = binding.value;
+		//ro.observe(el);
 
-		const el = query.el ? query.el() : src;
+		// TODO: 新たにプロパティを作るのをやめMapを使う
+		// ただメモリ的には↓の方が省メモリかもしれないので検討中
+		//el._ro_ = ro;
+		src._calc_ = calc;
+	},
 
-		el._ro_.unobserve(el);
+	unmounted(src, binding, vn) {
+		//el._ro_.unobserve(el);
+		window.removeEventListener('resize', src._calc_);
 	}
-};
+} as Directive;