vue-size-provider

Declarative element size observer and provider.

Motivation

Sometimes you may want to animate an element height when its content is changed. In that case, you need to directly read height value from DOM because Virtual DOM cannot acquire element size. Since it is low-level manipulation, the code would become messier.

vue-size-provider solves this problem by hiding low-level code with abstract helper components - <SizeProvider> and <SizeObserver>. The following gif is an example to show how vue-size-provider works:

vue-size-provider

Install

Install it via npm:

$ npm install vue-size-provider
Sh

Then, notify Vue to use it:

import Vue from 'vue'
import VueSizeProvider from 'vue-size-provider'

Vue.use(VueSizeProvider)
Js

Or you can directly use the components:

<script>
import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {
  components: {
    SizeProvider,
    SizeObserver
  }
}
</script>
Vue

Usage

First, wrap elements that you would like to observe their size by <SizeObserver>.

<template>
  <!-- observe content size -->
  <SizeObserver>

    <!-- arbitrary contents that you want to observe their size -->

  </SizeObserver>
</template>

<script>
import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {
  components: {
    SizeProvider,
    SizeObserver
  }
}
</script>
Vue

Then, wrap them by <SizeProvider> and any element that you want to animate its size when the contents size is changed.

<template>
  <!-- provide observed content size via scoped slot -->
  <SizeProvider>
    <div class="wrapper" slot-scope="{ width, height }" :style="{ height: height + 'px' }">

      <!-- observe content size -->
      <SizeObserver>

        <!-- arbitrary contents that you want to observe their size -->

      </SizeObserver>

    </div>
  </SizeProvider>
</template>

<script>
import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {
  components: {
    SizeProvider,
    SizeObserver
  }
}
</script>
Vue

Finally, you need to write some animation code. In this example, we simply use CSS transition:

<template>
  <!-- provide observed content size via scoped slot -->
  <SizeProvider>
    <div class="wrapper" slot-scope="{ width, height }" :style="{ height: height + 'px' }">

      <!-- observe content size -->
      <SizeObserver>

        <!-- arbitrary contents that you want to observe their size -->

      </SizeObserver>

    </div>
  </SizeProvider>
</template>

<script>
import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {
  components: {
    SizeProvider,
    SizeObserver
  }
}
</script>

<style scoped>
.wrapper {
  box-sizing: content-box;
  border: 1px solid #000;
  
  /* animate content height smoothly */
  transition: height 300ms ease-out;
}
</style>
Vue

Note that you may want to specify box-sizing: content-box; to the animating element because the provided width and height are content size of the observed element. i.e. They do not include padding and border size.

GitHub

ktsn/vue-size-provider

552

Declarative element size observer and provider — Read More

Latest commit to the master branch on 12-29-2022
Download as zip