@iwusong/datav-vue3/dist/cjs/hooks/useResize.js

Vue3 large screen data display component library

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lodash-es"),r=require("vue"),a=require("../utils/logger.js"),c=a.withPrefix("useResize");function m(e,n){const t=new MutationObserver(n);return t.observe(e,{attributes:!0,attributeFilter:["class","style"],attributeOldValue:!0}),t}function h(e,n){const{clientWidth:t=0,clientHeight:o=0}=e||{};e?(!t||!o)&&c.warn("Component width or height is 0px, rendering abnormality may occur!"):c.warn("Failed to get dom node, component rendering may be abnormal!"),n.width=t,n.height=o}function f(e){return s.isElement(e)?e:s.isElement(e.$el)?e.$el:null}function g(){const e=r.ref(),n=[],t=r.reactive({width:0,height:0}),o=()=>{h(e.value,t)},u=s.debounce(o,100),l=s.once(i=>{const d=f(i);if(!d){c.error("Bind Component Dom Ref Failed!");return}e.value=d});return r.onMounted(()=>{o();const i=m(e.value,u);window.addEventListener("resize",u),n.push(()=>{i.disconnect()},()=>{window.removeEventListener("resize",u)})}),r.onUnmounted(()=>{n.forEach(i=>i())}),{domSize:t,autoBindRef:l,refreshLayoutSize:o}}exports.useResize=g;