Vue-directive-window NPM

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

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