feat: demo

d2/components/d2/size-sensor/index.jsx

@@ -1,4 +1,5 @@
-import { defineComponent } from 'vue'
+import { defineComponent, getCurrentInstance, onBeforeUnmount, onMounted } from 'vue'
+import { bind, clear } from 'size-sensor'
 import { makeName } from 'd2/utils/component.js'
 
 const name = 'size-sensor'
@@ -10,12 +11,30 @@ export default defineComponent({
   props: {
     tag: { type: String, default: 'div' }
   },
+  setup () {
+    const { ctx } = getCurrentInstance()
+
+    function init () {
+      const targetElement = ctx.$el
+      bind(targetElement, element => {
+        console.log(element)
+      })
+    }
+
+    function destroy () {
+      clear(ctx.$el)
+    }
+
+    onMounted(() => {
+      init()
+    })
+
+    onBeforeUnmount(() => {
+      destroy()
+    })
+  },
   render () {
     const Tag = this.tag
-    return (
-      <Tag>
-        { this.$slots?.default?.() }
-      </Tag>
-    )
+    return <Tag>{ this.$slots?.default?.() }</Tag>
   }
 })

d2/views/dashboard/demo/component/d2-size-sensor/base.vue

@@ -3,7 +3,31 @@
 </route>
 
 <template>
-  <d2-size-sensor>
-    content
+  <section class="bg-gray-100 border border-gray-200 rounded p-4 mb-4">
+    <a-slider v-model:value="height" :min="30" :max="300" />
+  </section>
+  <d2-size-sensor class="border border-indigo-500 rounded">
+    <d2-flex :style="style" center>
+      height: {{ height }}px
+    </d2-flex>
   </d2-size-sensor>
 </template>
+
+<script>
+import { computed, ref, unref } from 'vue'
+
+export default {
+  setup () {
+    const height = ref(50)
+
+    const style = computed(() => ({
+      height: unref(height) + 'px'
+    }))
+
+    return {
+      height,
+      style
+    }
+  }  
+}
+</script>