Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Vue directive for making an element resizable

License

NotificationsYou must be signed in to change notification settings

kevinleedrum/v-resizable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue 2.xVue 3.xnpmminified sizelicense

This Vue (2.x / 3.x) plugin adds av-resizable directive to make an element resizable. Unlike the CSSresize property, the element may be resized from any side or corner, and aresize event is emitted.

🚀Live Demo

Installation & Usage

Install the package using npm/yarn.

npm i v-resizable --save

Add the plugin to your app.

// main.js / main.tsimportVResizablefrom'v-resizable'Vue.use(VResizable)

Add the directive to an element.

<!-- Component.vue --><divv-resizable></div>

Including as a Script

Alternatively, you can includev-resizable alongsidevue usingscript tags.

<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://cdn.jsdelivr.net/npm/v-resizable"></script>

Options

Handles

You can set which handles are available for resizing by adding modifiers to the directive.

<!-- only allow resizing the width via the left and right edges --><divv-resizable.l.r></div><!-- only allow resizing from the bottom-right corner --><divv-resizable.br></div><!-- enable all handles; this is the same as providing no modifiers --><divv-resizable.t.r.b.l.tr.br.bl.tl></div>

Constrain the width and height

You can specify aminWidth,maxWidth,minHeight, andmaxHeight in pixels.

<divv-resizable="{ minWidth: 300, minHeight: 300, maxWidth: 1000, maxHeight: 1000 }"></div>

Modify the handle areas

If necessary, you can change the pixel width/height of the invisible handles (default: 12), as well as theirz-index (default: 100).

<divv-resizable="{ handleWidth: 16, handleZIndex: 1000 }"></div>

Overriding Defaults

To avoid having to repeat the same option values in your app, you can override the default values.

When usingVue.use, pass the default values as the second argument.

// main.js / main.tsVue.use(VResizable,{handles:['l','r'],minWidth:300,minHeight:300,maxWidth:1000,maxHeight:1000,handleWidth:16,handleZIndex:1000,})

When includingv-resizable as a global script, you can instead callVResizable.setDefaults. Be sure to set defaultsbefore creating your Vue instance.

VResizable.setDefaults({handles:['l','r'],minWidth:300,minHeight:300,maxWidth:1000,maxHeight:1000,handleWidth:16,handleZIndex:1000,})

Listening forresize Events

Thev-resizable directive also implements emittingresize events.

<divv-resizable@resize="myResizeHandlerMethod"></div>

About

Vue directive for making an element resizable

Topics

Resources

License

Stars

Watchers

Forks

[8]ページ先頭
©2009-2025 Movatter.jp