35 lines
750 B
TypeScript
35 lines
750 B
TypeScript
|
import { Directive } from 'vue';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
mounted(src, binding, vn) {
|
|||
|
|
const calc = () => {
|
|||
|
|
const height = src.clientHeight;
|
|||
|
|
const width = src.clientWidth;
|
|||
|
|
|
|||
|
|
// 要素が(一時的に)DOMに存在しないときは計算スキップ
|
|||
|
|
if (height === 0) return;
|
|||
|
|
|
|||
|
|
binding.value(width, height);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
calc();
|
|||
|
|
|
|||
|
|
// Vue3では使えなくなった
|
|||
|
|
// 無くても大丈夫か...？
|
|||
|
|
// TODO: ↑大丈夫じゃなかったので解決策を探す
|
|||
|
|
//vn.context.$on('hook:activated', calc);
|
|||
|
|
|
|||
|
|
const ro = new ResizeObserver((entries, observer) => {
|
|||
|
|
calc();
|
|||
|
|
});
|
|||
|
|
ro.observe(src);
|
|||
|
|
|
|||
|
|
src._get_size_ro_ = ro;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
unmounted(src, binding, vn) {
|
|||
|
|
binding.value(0, 0);
|
|||
|
|
src._get_size_ro_.unobserve(src);
|
|||
|
|
}
|
|||
|
|
} as Directive;
|