VueResizor

🖱 A Vue component for resizing with dragging

TOC

• Demo
• Usage
• Available Props
• Available Events
• Sponsors
• Backers
• Changelog
• License

Demo

Usage

<template>
  <div class="parent">
    <vue-resizor v-model:indicators="indicators">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
    </vue-resizor>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import VueResizor, { Indicator } from 'vue-resizor'

import 'vue-resizor/styles.css'

const indicators = ref<Indicator[]>()
</script>

Available Props

| prop | type (range) | default value | | ------------ | --------------------------------- | ------------- | | indicators | Indicator[] | N/A | | size | number (indicator width/height) | 2 |

Available Events

| event | type | | ------------------- | ------------- | | 'update:indicators' | Indicator[] |

Sponsors

| 1stG | RxTS | UnTS | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | | | |

Backers

| 1stG | RxTS | UnTS | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | | | |

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

MIT © JounQin@1stG.me