uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件（解决小程序、APP 无法使用 document.body.appendChild 插入组件节点）适配全端

uni-app中实现一个全局弹层组件

引用超级全局组件方案

一、安装 npm install vue-inset-loader --save-dev

二、vue.config.js注入loader

var path = require("path")

module.exports = {
	// 配置路径别名
	configureWebpack: {
		devServer: {
			disableHostCheck: true
		},

		module: {
			rules: [
				{
					test: /\.vue$/,
					use:{
						// loader: "vue-inset-loader",
						// // 针对Hbuilder工具创建的uni-app项目
						loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")
					}
				}
			]
		},
	}
}

第三步、pages.json配置文件中添加insetLoader

“insetLoader”: {
“config”:{
“confirm”: “”
},
“label”:[“confirm”],
“rootEle”:“view”
},

第四步 、main.js （全局注册组件）

import UModal from "@/uview-ui/components/u-modal/u-modal";
Vue.component('UModal',UModal)

第五步 组件的封装

第六步 全局调用组件