import { App } from 'vue' import { SagVxeConfig, SagVxePage } from 'sag-vxe-pc' import 'sag-vxe-pc/dist/style.css' 1.配置 SagVxeConfig.setupConfig({ application: 'xxx', //应用名称-缓存使用(如果不设可能会引起同一个项目下不同子应用的缓存命名冲突) size: 'small', //全局尺寸 medium small mini messageResp: true, //按钮请求是否弹框提示消息 buttonKeyName: '_X_BUTTON_INFO', //弹出vue页面带入给子页面的按钮信息key名 ctxPath: 'xxx', //根路径(请求服务器的路径如果不以斜杠开头都将自动添加该前缀) requestDictUrl: 'xxx', //下拉框请求服务路径 dynamicViewsModules: import.meta.glob('../xxx/xxx/**/*.vue'), //动态组件 requestPlugin: axios.post<any, any>(requestUrl, params), //统一请求后台服务器方法 templateForm: { vxeSlot: false, //true为vxe-table控件 false为antd控件 formProps: { vertical: false, //是否使用垂直布局 titleColon: true, //自动设置冒号 titleWidth: 110, //标题宽度 titleAlign: 'right', //标题位置 buttonAlign: 'right', //按钮位置 foldingLength: 8, //默认展开数量 }, }, templateTable: { minHeight: 200, maxHeight: 1000, showOverflow: true, // ellipsis（只显示省略号）,title（显示为原生 title）,tooltip或true（显示为 tooltip 提示）, false则换行显示 showButtonLink: true, //表格按钮列是否以超链接显示 toolbarConfig: { className: 'vxe-table--toolbar', perfect: true, print: false, // 显示打印按钮 refresh: false, // 显示刷新按钮 zoom: false, // 显示全屏按钮 }, tableColumnMerge: { backgroundColor: '#99d9f5 !important', //合并行单元格底色 }, ignoreExportColumnsTitle: ['', '序号', '操作', '处理'], //导出忽略列 }, targetModal: { title: '业务处理', //弹窗默认标题 width: '85%', //弹窗默认高度 height: '80vh', //弹窗默认宽度 mountainTop: true, //弹窗是否默认挂载到body上 componentType: 'iframe', //弹窗默认类型，不设置则为vue maskClosable: true, }, })

const setupVxeTable = (app: App) => { app.use(SagVxePage) } export default setupVxeTable

2.webpack 设置 module.exports = { transpileDependencies: ['sag-vxe-pc'], }

3.babel 设置 module.exports = { compact: false, //解除组件引用 js 文件大 };

4.样式 当弹出框挂载不在body下 4.1 需要在挂载处设置样式名h-con-iframe(样式内容可为空) 4.2 声明挂载处 // 获取弹窗挂载的内部容器点 provide('dialogContainer', () => { return document.getElementById(unref(computed(() => 'xxx'))); });