一款vue弹框可设置最大化最小化，多选的插件库

文档地址如下： http://wayla.gitee.io/compage/

1.使用背景

elementUI提供的el-dialog弹框无法对其最大化最小化和移动，不够灵活，有事因为甲方的项目需求，只用el-dialig可能无法很好的达到预想的效果，因此推荐这款vue-pubilc-layer！

2.安装

npm install vue-pubilc-layer -s

这里如果用yarn add可能会下载空包，可以在node_modules中找到vue-pubilc-layer空包 继续yarn install

3.VUE全局设置，并封装起来

（1）在项目文件的main.js中设置如下

import layer from 'vue-pubilc-layer';
Vue.use(layer);

（2）在公共组件添加一个ts文件 这路取名 LayDialog.ts，并在该文件下写如下代码：

import Vue, { VNode } from 'vue';
//四个参数 1.this传过去  2.弹框标题  3.组件内容，可以是vue组件，html字符串，dom元素对象和类型对应 4.需要传递的数据
function layDialog(this_: any, title: string, subCom: any, sunData: any = null) {
  this_.$dialog.open({
    title: title,
    // shade: true,
    multiple: true,
    move: true,
    hasMax: false,
    bottomOff: 50,
    leftOff: 500,
    area: {
      width: '45%',
    },
    content: {
      type: 'vue',
      subCom: subCom, //type是vue的话，这里就是对应vue组件名
      subData: sunData, //这是传给subCom组件的数据 可以不传
    },
  });
}
export default { layDialog };
//对全局定义$LayDialog 方便在其他组件直接使用
declare module 'vue/types/vue' {
  interface Vue {
    $LayDialog: any;
  }
}

然后在main,ts中把引入上面的ts文件

import LayDialog from '@/views/Components/LayerDialog/LayDialog';

4.在任一组件中使用

 	 this.$LayDialog.layDialog(
        this,
        this.mapPointInfo.name, //标题
        MapClickDialogInLayer, //直接import后写在这
        this.mapPointInfo //传递给MapClickDialogInLayer组件的数据
      );

5. 注意

改弹框的样式不可以在scoped的环境下设置，因为他和app同级 ，vue无法找到该样式

可以参考我的项目代码

<style lang="scss">
	.w-dialog-shade {
	  z-index: 2000 !important;
	}
	.w-dialog {
	  background: $dialog-background !important;
	  z-index: 2001 !important;
	}
	.w-dialog-body {
	  padding: 0 !important;
	  background-color: $dialog-background !important;
	}
	.w-dialog-head {
	  width: 97% !important;
	  margin: auto;
	  background: $dialog-background !important;
	  border-bottom: 1px solid $header-title-border !important;
	  .dialog-head-title {
	    color: $text-main-color !important;
	    line-height: 16px;
	    font-size: 16px;
	    font-weight: 600;
	    padding-left: 15px !important;
	    border-left: 3px solid $header-title-color;
	  }
	  .dialog-head-btn {
	    i {
	      width: 18px !important;
	      height: 18px !important;
	      margin-right: 10px !important;
	    }
	  }
	}
</style>

6. 效果如下（内容保密，右上可以最小化）

最大化我这里不需要就禁用了，可以在封装函数那里设置出来 可参考文档