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.

CDN

<script src="https://unpkg.com/vue-directive-window/dist/vue-directive-window.umd.min.js"></script>

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

<div class="demo-window" v-window="windowParams">
  <!-- container content -->
</div>

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

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 set true, 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 use document.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 use document.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.