uniapp所有页面展示悬浮组件/弹窗的方法无需每个页面插入

首先需要创建一个组件，代码示例如下，具体样式需求根据自己情况定

<template>
	<view class="">
		<view
			class="my-component"
			@tap.stop
			v-show="isShowpage"
			:style="{ top: top + 'px', left: left + 'px' }"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
			@touchstart="handleTouchStart"
			@touchstart.stop
		>	
		</view>
	</view>
</template>
<script>
export default {
	name: 'MyComponent',
	props: {},
	components: {
		top："",
        left:""，
        isShowpage：true
	},
	data() {
		return {	
			// 组件数据
		};
	},
	watch: {},
	mounted() {},
	methods: {// 组件方法
		initPositionHandler() {
			let left = systemInfo.screenWidth - 40;
			let center = systemInfo.screenHeight - 60;
		},
		handleTouchStart(event) {
			this.eventtauch = 'move';
		},
		handleTouchMove(event) {
			// const intNum = Math.floor(num);
			let left = Math.floor(event.changedTouches[0].clientX) - 50;
			let top = Math.floor(event.changedTouches[0].clientY) - 50;
			this.left = left;
			this.top = top; 
		},
		handleTouchEnd(event) {
			this.eventtauch = 'click';
			// 在 touchend 事件中进行拖动结束后的处理
			// 可以进行点击事件的判断或其他操作
		},
	}
};
</script>
<style scoped>
.my-component {
	/* 组件样式 */
	position: fixed;
	width: 288rpx;
	height: 172rpx;
	z-index: 997;
}
</style>

然后使用npm下载vue-inset-loader

npm i vue-inset-loader

在main.js中添加如下内容

//组件路径
import waterbot from "@/components/dialogTip/dialog.vue" 
//注册组件
Vue.component('waterbot', waterbot)

配置pages.json

{
	"insetLoader": {
		"config": {
			"confirm": "<waterbot></waterbot>"

		},
		"label": ["confirm"],
		"rootEle": "view"
	},

	"pages": [{
			"path": "pages/splash/splash/splash",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		}]
}

 注意：这里是重点，只要关心insetLoader这个对象就行了，如果你上下步骤都弄好了，而且项目也重启了好几次还是没有显示组件，注意你显示弹窗的页面是用了div作为根元素还是view，如果是div，那么"rootEle": "view"要更改为"rootEle": "div"，这很重要！！！

注意！！！如果你的代码中的根元素有的是div，有的又是view，那么！请你把rootEle设置为.*！！也就是👇

"rootEle": ".*"

配置vue.config.js

const path = require("path");
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: {
            loader: path.resolve(__dirname, "./node_modules/vue-inset-loader"),
          },
        },
      ],
    },
  },
};

 完成以上步骤后请记得一定要重启项目！！！！否者不会生效！！！！

最后补充一点如果是APP使用记得修改vue-inset-loader里面的微信判断