Skip to content

Array-Huang/vue-directive-window

Repository files navigation

Welcome to vue-directive-window 👋

Maintenance npm bundle size Documentation License: MIT

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.

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

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 Array Huang.
This project is MIT licensed.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published