Welcome to vue-directive-window 👋
Vue.js directive that enhance your Modal Window, support drag, resize and maximize.
vue-directive-window
requires your Node.js version >= 8.
Installation
There are two ways of installation, from CDN and from npm, you can choose which you like.
CDN
npm
npm install vue-directive-window
Local document
npm start
Hello World
vue-directive-window
provides two ways to use:
- Vue Custom Directive
- general javascript class library
Vue Custom Directive
<template> <div v-window="windowParams"> <!-- container content --> </div></template><script>import VueDirectiveWindow from 'vue-directive-window';Vue.use(VueDirectiveWindow); // When you take the CDN way, you don't need to import anything; you may use `Vue.use(window['vue-directive-window'])` instead.export default { data() { return { windowParams: { movable: false, resizable: ['left', 'left-top'], }, }; },}</script>
Javascript Class Library
<!-- container content -->
; // When you take the CDN way, you may use `const enhanceWindow = window['vue-directive-window'].enhanceWindow;` instead. const windowParams = movable: false resizable: 'left' 'left-top'; ;
Browser Compatibility
IE10 | IE11 | Chrome |
---|---|---|
OK | OK | OK |
Parameters
minWidth
- Type:
Number
- Default:
100
- Description: window's minimum width(px)
maxWidth
- Type:
Number
- Description: window's maximum width(px)
minHeight
- Type:
Number
- Default:
100
- Description: window's minimum height(px)
maxHeight
- Type:
Number
- Description: window's maximum height(px)
movable
- Type:
Boolean
/String
- Default:
true
- Accepted Values:
true
/false
/'horizontal'
/'vertical'
- Description: Is drag feature available; when set
movable
to'vertical'
, users will be only allow to make vertical drag; for the same reason,'horizontal'
means only allow horizontal drag; when settrue
, both directions are available.
resizable
- Type:
Boolean
/Array
- Default:
true
- Accepted Values:
left-top
/left-bottom
/left
/right-top
/right-bottom
/right
/top
/bottom
- Description: is resize feature available; when it is
true
, it means you could resize the window from every eight directions; when it is an Array value which contain String value, like['left', 'left-top']
you could resize the window only from targeted directions.
customMoveHandler
- Type:
String
/Element
- Description: custom drag handler. When it is
null
, you could move the window by dragging every inch of this window. Otherwise, when it is a String value,vue-directive-window
will usedocument.querySelector(customMoveHandler)
to get the handler's Element; in that case, you could move the window only by dragging the handler.
customMaximizeHandler
- Type:
String
/Element
- Description: maximize feature's handler. When it is a String value,
vue-directive-window
will usedocument.querySelector(customMoveHandler)
to get the handler.
maximizeCallback
- Type:
Function
- Description: window maximizeCallback function; there is one parameter, which means if it is current maximize(Boolean).
moveStartCallback
- Type:
Function
- Description: triggers when drag&move start.
movingCallback
- Type:
Function
- Description: triggers multiple times during drag&move going.
moveEndCallback
- Type:
Function
- Description: triggers when drag&move end.
Author
👤 Array Huang
- Github: @Array-Huang
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2019 Array Huang.
This project is MIT licensed.