介绍

今天要介绍的是一个Vue的增强组件——vue-directive-window，它让你的模态框轻而易举地支持类窗口操作，也就是说不仅仅对话框，还将具备一些窗口化的特性，诸如拖拽、最大化、缩放等增强型功能！

Github

https://gitee.com/mirrors/vue-directive-window

特性

• 节约成本

旨在以极少的改造成本，让一个现有的模态框或任何合适的HTMLElement轻松支持拖拽移动、调整大小、最大化等类视窗操作。

• 使用便捷

同时提供Vue自定义指令以及一般js类库两种调用方式。

• 可插拔

可以随时为某个系统里已存在的模块添上/去除类视窗操作的功能，而不会影响该模块原有的功能。

快速开始

• 安装使用npm

也可以使用其它包管理工具，如yarn

npm install vue-directive-window

vue-directive-window支持Vue自定义指令及一般js类两种方式来使用。

• 自定义指令方式

<script>
import VueDirectiveWindow from 'vue-directive-window';
Vue.use(VueDirectiveWindow); // 如果是以静态文件方式引入的话，则不需要 import，直接使用Vue.use(window['vue-directive-window'])
export default {
  data() {
    return {
      windowParams: {
        movable: false,
        resizable: ['left', 'left-top'],
      },
    };
  },
}
</script

• 一般使用

import { enhanceWindow } from 'vue-directive-window'; // 如果是以静态文件方式引入的话,则是const enhanceWindow = window['vue-directive-window'].enhanceWindow;

const windowParams = {
  movable: false
  resizable: ['left', 'left-top']
};

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

vue-directive-window支持IE10以及以后的浏览器

案例

本文只展示官方的一个案例，其它案例参考官方文档