update

杂项/ResizeObserverComponent.md

@@ -0,0 +1,86 @@
+```ts
+import {
+  defineComponent,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  h,
+  getCurrentInstance,
+  type PropType,
+} from 'vue-demi'
+import ResizeObserver from './ResizeObserver'
+import type { IOptions } from './types'
+
+
+// const component = {
+//   name: 'Home',
+//   props:{
+//     data: String,
+//   },
+//   setup（props, context）{
+//     // props.data
+//     // context.attrs    context.slots    context.emit 
+//   }
+// }
+
+export default defineComponent({
+  name: 'ResizeObserverComponent',
+  props: {
+    target: [String, Object] as PropType<string | HTMLElement>,
+    disabled: Boolean as PropType<boolean>,
+    immediate: Boolean as PropType<boolean>,
+    delay: {
+      type: Number as PropType<number>,
+      default: 150
+    }
+  },
+  setup(props, { slots }) {
+    let ro: ResizeObserver | null = null
+    watch(() => props.disabled, (val) => {
+      if (val) {
+        ro?.disconnect()
+      } else {
+        ro?.observe()
+      }
+    })
+    onMounted(() => {
+      // const { target, disabled, limiter, wait } = toRefs(props)
+      // 拿到当前组件的实例（注意已挂载）
+      const vm = getCurrentInstance()?.proxy
+
+      // 先用$el
+      let $el: HTMLElement = vm?.$el as HTMLElement
+
+      if (props.target) {
+        if (typeof props.target === 'string') {
+          $el = document.querySelector(props.target) as HTMLElement
+        } else if (props.target instanceof HTMLElement) {
+          $el = props.target
+        }
+      }
+      const options: IOptions = {
+        delay: props.delay,
+        immediate: props.immediate,
+        resize: (data, elem) => {
+          vm?.$emit('resize', data, elem)
+        }
+      }
+      ro = new ResizeObserver($el, options)
+    })
+    // 销毁 ResizeObserver实例
+    onBeforeUnmount(() => {
+      if (ro) {
+        ro.destroy()
+      }
+    })
+    
+    // 如果有单个子元素则直接渲染子元素
+    const defaultContent = slots.default?.()
+    return () => (
+      (defaultContent && defaultContent.length === 1)
+        ? defaultContent[0]
+        : h('div', defaultContent)
+    )
+  }
+})
+```