orange-vxe-modal-v3

弹出框，基于vxe-table v4+(v 3.2+稳定版),针对vue3.0版本使用

Vue 3.0版本使用

1、引入
npm install orange-vxe-modal -S
npm install xe-utils vxe-table
import {createApp} from 'vue'
import App from './App.vue'
import OrangeVxeModal from "orange-vxe-modal";

import "xe-utils";
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';

createApp(App).use(VXETable).use(OrangeVxeModal).mount('#app')


vue3.0使用方式

1、在App.vue主入口放置=============> <vxe-modal-container/>

<script setup>
import {getCurrentInstance} from "vue";
import Pops from "./pops";
const instance = getCurrentInstance();
const orMessage = instance.appContext.config.globalProperties.$vxeModal;

const openMessage = () => {
  let height = document.body.clientHeight - 80;
  orMessage.show(Pops, {
    title: "标题",
  }, {
    id: "test", //弹窗框唯一id
    width: 1150, //宽
    height: height, //高
    showHeader: false, //是否显示头部，
    ... //还有一些属性，暂时不表，参考vxe-table官网中modal部分，继承其所有属性
  },{
    close:()=>{
      console.log("弹出框关闭时触发！")
    }
  })
}

</script>