介绍

今天要介绍的是一个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类两种方式来使用。

• 自定义指令方式

<template>
  <div v-window="windowParams">
    <!-- 容器内容 -->
  </div>
</template>
<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

• 一般使用

<div class="demo-window" v-window="windowParams">
  <!-- 容器内容 -->
</div>

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以及以后的浏览器

案例

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

<template>
  <div class="container">
    <div class="window window1" v-show="ifShowWindow" v-window="windowParams">
      <div class="window__header">
        一般窗口
        <button class="maximize-btn" type="button">
          <template v-if="!isMaximize"
            >点这放大</template
          >
          <template v-else
            >点这缩小</template
          >
        </button>
      </div>
      <div class="window__body">
        <iframe height="100%" width="100%" frameborder="0" src="https://array-huang.github.io/vue-directive-window/">
      </div>
    </div>

    <button type="button" @click="ifShowWindow = true" v-if="!ifShowWindow">
      显示窗口
    </button>
    <button type="button" @click="ifShowWindow = false" v-else>隐藏窗口</button>
  </div>
</template>
<script>
  Vue.use(window['vue-directive-window']);

  function maximizeCb(isMaximize) {
    this.isMaximize = isMaximize;
  }

  export default {
    data() {
      return {
        windowParams: {
          minWidth: 10,
          maxWidth: 800,
          minHeight: 100,
          maxHeight: 800,
          customMaximizeHandler: '.maximize-btn',
          maximizeCallback: maximizeCb.bind(this),
        },
        ifShowWindow: false,
        isMaximize: false,
      };
    },
  };
</script>
<style>
  .container {
    padding: 30px;
  }
  .window1 {
    width: 400px;
    position: fixed;
    top: 60px;
    left: 0;
  }
</style>

效果如下