https://github.com/kevinleedrum/v-resizable
Vue directive for making an element resizable
https://github.com/kevinleedrum/v-resizable
directive plugin resizable resize vue vue-plugin vue2 vue3 vuejs vuejs2 vuejs3
Last synced: 2 months ago
JSON representation
Vue directive for making an element resizable
- Host: GitHub
- URL: https://github.com/kevinleedrum/v-resizable
- Owner: kevinleedrum
- License: mit
- Created: 2021-03-18T02:01:20.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-23T02:20:20.000Z (about 4 years ago)
- Last Synced: 2025-02-18T05:17:26.182Z (3 months ago)
- Topics: directive, plugin, resizable, resize, vue, vue-plugin, vue2, vue3, vuejs, vuejs2, vuejs3
- Language: JavaScript
- Homepage:
- Size: 70.3 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-resizable
[](https://vuejs.org/v2/guide/)
[](https://v3.vuejs.org/guide/)
[](https://www.npmjs.com/package/v-resizable)
[](https://github.com/kevinleedrum/v-resizable/blob/main/LICENSE)
This Vue (2.x / 3.x) plugin adds a `v-resizable` directive to make an element resizable. Unlike the CSS `resize` property, the element may be resized from any side or corner, and a `resize` event is emitted.
🚀 [Live Demo](https://codepen.io/kevinleedrum/pen/OJbKPYE)
## Installation & Usage
Install the package using npm/yarn.
```bash
npm i v-resizable --save
```
Add the plugin to your app.
```ts
// main.js / main.ts
import VResizable from 'v-resizable'
Vue.use(VResizable)
```
Add the directive to an element.
```html
```
## Including as a Script
Alternatively, you can include `v-resizable` alongside `vue` using `script` tags.
```html
```
## Options
### Handles
You can set which handles are available for resizing by adding modifiers to the directive.
```html
```
### Constrain the width and height
You can specify a `minWidth`, `maxWidth`, `minHeight`, and `maxHeight` in pixels.
```html
```
### Modify the handle areas
If necessary, you can change the pixel width/height of the invisible handles (_default: 12_), as well as their `z-index` (_default: 100_).
```html
```
## Overriding Defaults
To avoid having to repeat the same option values in your app, you can override the default values.
When using `Vue.use`, pass the default values as the second argument.
```ts
// main.js / main.ts
Vue.use(VResizable, {
handles: ['l', 'r'],
minWidth: 300,
minHeight: 300,
maxWidth: 1000,
maxHeight: 1000,
handleWidth: 16,
handleZIndex: 1000,
})
```
When including `v-resizable` as a global script, you can instead call `VResizable.setDefaults`. Be sure to set defaults _before_ creating your Vue instance.
```js
VResizable.setDefaults({
handles: ['l', 'r'],
minWidth: 300,
minHeight: 300,
maxWidth: 1000,
maxHeight: 1000,
handleWidth: 16,
handleZIndex: 1000,
})
```
## Listening for `resize` Events
The `v-resizable` directive also implements emitting `resize` events.
```html
```