Welcome to vue-directive-window 👋

> Vue.js directive that enhance your Modal Window, support drag, resize and maximize.

- Github
- 中文 README
- 中文 Document

> 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.

$3

``html

`

$3

`bash
npm install vue-directive-window
`

Local document

`bash
npm start
`

Hello World

vue-directive-window provides two ways to use:
- Vue Custom Directive
- general javascript class library

$3

`vue


`

$3

`html

`

`javascript
import { enhanceWindow } from 'vue-directive-window'; // 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']
};

enhanceWindow(document.querySelector('.demo-window'), windowParams);
`

Browser Compatibility

| IE10 | IE11 | Chrome |
| :---: | :---: | :---: |
| OK | OK | OK |

Parameters

$3

- Type: Number
- Default: 100
- Description: window's minimum width(px)

$3

- Type: Number
- Description: window's maximum width(px)

$3

- Type: Number
- Default: 100
- Description: window's minimum height(px)

$3

- 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 set true, both directions are available.

$3

- 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.

$3

- 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 use document.querySelector(customMoveHandler) to get the handler's Element; in that case, you could move the window only by dragging the handler.

$3

- Type: String/Element
- Description: maximize feature's handler. When it is a String value, vue-directive-window will use document.querySelector(customMoveHandler) to get the handler.

$3

- 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.