natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better resize observe

This commit is contained in:
syuilo 2020-02-10 03:13:22 +09:00
parent 892cb44d84
commit bd828bb072
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -36,6 +36,7 @@
"@fortawesome/free-regular-svg-icons": "5.12.0", "@fortawesome/free-regular-svg-icons": "5.12.0",
"@fortawesome/free-solid-svg-icons": "5.12.0", "@fortawesome/free-solid-svg-icons": "5.12.0",
"@fortawesome/vue-fontawesome": "0.1.9", "@fortawesome/vue-fontawesome": "0.1.9",
"@juggle/resize-observer": "3.0.2",
"@koa/cors": "3.0.0", "@koa/cors": "3.0.0",
"@koa/multer": "2.0.2", "@koa/multer": "2.0.2",
"@koa/router": "8.0.6", "@koa/router": "8.0.6",

13
src/client/directives/size.ts
View File

@ -1,3 +1,5 @@
import { ResizeObserver } from '@juggle/resize-observer';
export default { export default {
inserted(el, binding, vn) { inserted(el, binding, vn) {
const query = binding.value; const query = binding.value;
@ -52,13 +54,16 @@ export default {
calc(); calc();
el._sizeResizeCb_ = calc; const ro = new ResizeObserver((entries, observer) => {
calc();
});
ro.observe(el);
window.addEventListener('resize', calc); el._ro_ = ro;
vn.context.$on('hook:activated', calc);
}, },
unbind(el, binding, vn) { unbind(el, binding, vn) {
window.removeEventListener('resize', el._sizeResizeCb_); el._ro_.unobserve(el);
} }
}; };

5
yarn.lock
View File

@ -102,6 +102,11 @@
normalize-path "^2.0.1" normalize-path "^2.0.1"
through2 "^2.0.3" 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": "@koa/cors@3.0.0":
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.0.0.tgz#df021b4df2dadf1e2b04d7c8ddf93ba2d42519cb" resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.0.0.tgz#df021b4df2dadf1e2b04d7c8ddf93ba2d42519cb"