wangweiwei / vue-resize-observer

Vue Resize Observer
MIT License
61 stars 9 forks source link

Usage inside a single component #5

Open Connum opened 3 years ago

Connum commented 3 years ago

I wanted to use this directive in a single component, because that component is supposed to be deliveredas an in dependend package and I don't want all end users to have to call .use() and rather ship the directive with the component.

So I did the import in the component's code and added the directive, but it doesn't work that way, the callback is never called. It does work when I go the normal route mentioned in the README, though, so apparently I have done everything else right. It would be great if that could be implemented in the package.

IndependentComponent.vue

<template>
  <div v-resize="onResize">
    Of course there's some more in here that will make the parent increase or decrease...
  </div>
</template>
<script>
import VueResizeObserver from "vue-resize-observer";

export default {
    directives: { 'resize': VueResizeObserver },
    setup() {
      const onResize = () => console.log("resized")  
      return {
         onResize
       }
    })
}
</script>
kosmos commented 3 years ago

For me it will be also very useful.