1.0.1 • Published 3 years ago

vue-resize v1.0.1

Weekly downloads
185,189
License
MIT
Repository
github
Last release
3 years ago

vue-resize

npm npm vue2

Detect DOM element resizing

JSFiddle

Sponsors

sponsors logos

Installation

npm install --save vue-resize

Module import

⚠️ You need to include the package CSS:

import 'vue-resize/dist/vue-resize.css'

Then import the package and install it into Vue:

import Vue from 'vue'
import VueResize from 'vue-resize'

Vue.use(VueResize)

Or:

import Vue from 'vue'
import { ResizeObserver } from 'vue-resize'

Vue.component('resize-observer', ResizeObserver)

Browser

<link rel="stylesheet" href="vue-resize/dist/vue-resize.css"/>

<script src="vue.js"></script>
<script src="vue-resize/dist/vue-resize.min.js"></script>

The plugin should be auto-installed. If not, you can install it manually:

Vue.use(VueResize)

Or:

Vue.component('resize-observer', VueResize.ResizeObserver)

Usage

Add the <resize-observer> inside a DOM element and make its position to something other than 'static' (for example 'relative'), so that the observer can fill it.

Listen to the notify event that is fired when the above DOM element is resized.

Example

<template>
  <div class="demo">
    <h1>Hello world!</h1>
    <resize-observer @notify="handleResize" />
  </div>
</template>

<script>
export default {
  methods: {
    handleResize ({ width, height }) {
      console.log('resized', width, height)
    }
  }
}
</script>

<style scoped>
.demo {
  position: relative;
}
</style>

License

MIT

@ropez/vue-virtual-scrollerbb-chatv-tooltip-ssr@yjl9903/v-tooltip@clicdata/vue-virtual-scrollerlingxing-uieasis@infinitebrahmanuniverse/nolb-vue-r@everything-registry/sub-chunk-3090kfront-baseuikodexa-vuekolach-vue-virtual-tablejscatalystmacwk-tooltipmingx64-vue3-vs-testlzm-virtual-listel-virtual-scroll-treeelcubefake-scrollfloating-vuefloating-vue-forkfloating-vue2@zanllp/vue-virtual-scroller@zhangrt/alien@wxtec/wt-ui@tehsurfer/csvvuer@tafelnl/vue-virtual-scroller@teleju/vue-swaggywagy-scroller@vue/ui@tianfanfan/vue-virtual-scroller@24consulting/audi_ui@akryuminfinitum/vue-virtual-scroller@starpad/ui@taki9/floating-vue@startinfinity/vue-virtual-scrollerpit-element-ui@cchen028/vue-virtual-scrollerbrisstor-vue-virtual-scrollerbrisstor-vue-virtual-tablebusiness-entity@citriik/vue-virtual-scrollersequence-browserceresimaging-rej@duzhijie/vue-virtual-scroll-tree@guijs/frontend-uixinya-table@hokify/vue-virtual-scroller@ileostar/v3-directives@imkit/imkit-js-sdk-v3@fork-anyone/vue-virtual-scroller@ishitatsuyuki/vue-virtual-scroller@impvis/componentsvue-fluid-scrollvue-googlemapsvue-scroll-barvue-standardvue-fake-scrollvue-fixed-blockvue-cordova-scrollervue-expandable-gridtx-drawer@mezereon/ui-components-vue@mikevmil/vue-googlemaps@inconvo/vue-virtual-scrollervue-virtual-scroller-classicvue-virtual-scroller-czfixvue-virtual-scroller-devstubvue-virtual-scroller-enhancedvue-virtual-scroller-hivue-virtual-scroller-leahcimicvue-virtual-tablevue-virtual-tablesvue-virtualization-listvue-virtual-repeatervue-virtual-scrollerxd-vue-googlemapsworksafe-component-libraryzktj-vue-virtual-scrollerzktj3-vue-virtual-scrollervunemesis-vue-virtual-scrollerv-tooltipv-tooltip-ssr-testv-tooltip3v-nav-bar@factoringplus/pl-components-pack@gidoont/v-tooltip@davidarico/vue-virtual-scroller@devstub/vue-virtual-scroller@deepdiver/vue-virtual-scrollerdatav-vitesw-longteng-vue-virtual-scrollerssr-virtual-scroller@byzanteam/brickbotoxs2tempsen@cling-se/v-tooltip-root-node@ceresimaging/rej@desco/urano@desco/vue-flipshrimp-vue-components
1.0.1

3 years ago

2.0.0-alpha.1

3 years ago

1.0.0

3 years ago

0.5.0

4 years ago

0.4.5

5 years ago

0.4.4

6 years ago

0.4.3

6 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago