@@ -124,6 +124,64 @@ export const BToMB = (byteSize, fixed = 3) => {
124124 return ( byteSize / 1024 / 1024 ) . toFixed ( fixed ) ;
125125} ;
126126
127+ export const deObserver = ( observers ) => {
128+ if ( Array . isArray ( observers ) ) {
129+ observers . forEach ( ( observer ) => {
130+ observer . disconnect ( ) ;
131+ } ) ;
132+ } else if ( observers ) {
133+ observers . disconnect ( ) ;
134+ }
135+ } ;
136+
137+ export const imgPreOccupiedSpace = (
138+ anchorImg ,
139+ imgHeight ,
140+ proportion ,
141+ fixedHeight
142+ ) => {
143+ const observer = new ResizeObserver ( ( ) => {
144+ imgHeight . value = fixedHeight
145+ ? fixedHeight
146+ : ( anchorImg . value . clientWidth / proportion ) . toFixed ( 2 ) + 'px' ;
147+ } ) ;
148+ observer . observe ( anchorImg . value ) ;
149+ return observer ;
150+ } ;
151+
152+ export const onImgLoad = ( observers , imgHeight ) => {
153+ deObserver ( toValue ( observers ) ) ;
154+ imgHeight . value = 'auto' ;
155+ } ;
156+
157+ export const useSeizeSeat = ( refName , proportion , imgHeights , fixedHeight ) => {
158+ const newHeights = ref ( 0 ) ;
159+ if ( imgHeights !== undefined ) {
160+ imgHeights . value . push ( newHeights ) ;
161+ } else {
162+ imgHeights = shallowRef ( [ newHeights ] ) ;
163+ }
164+ const img = useTemplateRef ( refName ) ;
165+
166+ // 此处异步执行，如果不使用ref包裹返回的observer为null
167+ let observer = ref ( ) ;
168+
169+ onMounted ( ( ) => {
170+ observer . value = imgPreOccupiedSpace (
171+ img ,
172+ newHeights ,
173+ proportion ,
174+ fixedHeight
175+ ) ;
176+ } ) ;
177+
178+ onUnmounted ( ( ) => {
179+ // 在组件销毁前取消观察
180+ deObserver ( observer . value ) ;
181+ } ) ;
182+ return [ observer , imgHeights ] ;
183+ } ;
184+
127185export const useHighlightWatch = ( switchHash ) => {
128186 const highBrightnessControllerStore = useHighBrightnessControllerStore ( ) ;
129187 const route = useRoute ( ) ;
0 commit comments