diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/client/directives/size.ts | 13 | ||||
| -rw-r--r-- | yarn.lock | 5 |
3 files changed, 15 insertions, 4 deletions
diff --git a/package.json b/package.json index 0a864c8de6..998c160eb5 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@fortawesome/free-regular-svg-icons": "5.12.0", "@fortawesome/free-solid-svg-icons": "5.12.0", "@fortawesome/vue-fontawesome": "0.1.9", + "@juggle/resize-observer": "3.0.2", "@koa/cors": "3.0.0", "@koa/multer": "2.0.2", "@koa/router": "8.0.6", diff --git a/src/client/directives/size.ts b/src/client/directives/size.ts index 7c4254566c..140cb0bd70 100644 --- a/src/client/directives/size.ts +++ b/src/client/directives/size.ts @@ -1,3 +1,5 @@ +import { ResizeObserver } from '@juggle/resize-observer'; + export default { inserted(el, binding, vn) { const query = binding.value; @@ -52,13 +54,16 @@ export default { calc(); - el._sizeResizeCb_ = calc; + const ro = new ResizeObserver((entries, observer) => { + calc(); + }); + + ro.observe(el); - window.addEventListener('resize', calc); - vn.context.$on('hook:activated', calc); + el._ro_ = ro; }, unbind(el, binding, vn) { - window.removeEventListener('resize', el._sizeResizeCb_); + el._ro_.unobserve(el); } }; @@ -102,6 +102,11 @@ normalize-path "^2.0.1" through2 "^2.0.3" +"@juggle/resize-observer@3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.0.2.tgz#f4f326806826c0da5221411374e4c54902c327bb" + integrity sha512-9fEfZIxZ1qTahMSX50pigfSJ/1N6X2oABhmgd4Dt2SsPkZi0lTlvoHu5V2yrGZ6m+oALfS4tJrpx9nbVIxwOYQ== + "@koa/cors@3.0.0": version "3.0.0" resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.0.0.tgz#df021b4df2dadf1e2b04d7c8ddf93ba2d42519cb" |