<template>
  <div :is="tag" class="n-resize">
    <slot></slot>
  </div>
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill'
import {prop} from '@uif/next/lib/utils/tools'
export default {
  name: 'n-resize',
  props: {
    // 标签名
    tag: prop.string('div'),
    // 强制监听（默认有宽高才会触发事件）
    force: prop.boolean()
  },
  mounted () {
    this.ro = new ResizeObserver(this.listener)
    this.ro.observe(this.$el)
  },
  beforeDestroy () {
    this.ro.disconnect()
  },
  methods: {
    listener (entries) {
      const rect = entries[0].contentRect
      if (this.force || (rect.width && rect.height)) {
        this.$emit('update', rect, this.$el)
      }
    }
  }
}

</script>
