orange-vxe-modal v0.2.0

弹出框

基于vxe-table v3+(v 2.6+稳定版),针对vue2.0版本使用

Thinks Xu Liangzhan's VxeTable

@author Mr.Orange

Vue 2.0版本使用

1、安装
npm install orange-vxe-modal -S

2、main.js中引入
import OrangeVxeModal from "orange-vxe-modal";
Vue.use(OrangeVxeModal);

3、安装
npm install xe-utils vxe-table@legacy

4、main.js引入
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css'
import "xe-utils"
Vue.use(VXETable)

使用方式：
1、在App.vue主入口放置=============> <vxe-modal-container/>,如下：

<template>
  <div id="app">
    <vxe-modal-container/>
  </div>
</template>

2、在需要使用的弹出框页面函数式调用
<template>
  <div>
    <button @click="handleOpen">打开弹窗</button>
  </div>
</template>
<script>
import HelloWorld from "@/views/index/HelloWorld";

export default {
  name: "index-page",
  methods: {
    handleOpen() {
      let height = document.body.clientHeight - 80;
      this.$vxeModal.show(HelloWorld, {
        title: "标题" //传参数，传过去之后props
      }, {
        id: "test", //弹窗框唯一id
        width: 1150, //宽
        height: height, //高
        showHeader: false //是否显示头部
        ... //还有一些属性，暂时不表，参考vxe-table官网中modal部分，继承其所有属性
      }, {
        close: () => {
          console.log("弹出框关闭时触发！")
        }
      })
    }
  }
}
</script>
---------------------HelloWorld页面-----------------------
<template>
    <div>
        <div>{{ title }}这是一个弹出框</div>
        <button @click="$emit('close')">关闭</button>
</div>
</template>

<script>
    export default {
    name: "HelloWorld",
    props: {
        title: String //接收传过来的参数值
    }
}
</script>