uniapp用vue-inset-loader全局挂载对话框

uniappH5用vue-inset-loader全局挂载组件

首先附上文档地址 ：GitHub - 1977474741/vue-inset-loader: 编译阶段在sfc模板指定位置插入自定义内容

创建一个组件：

<template>
	<view>
		<uni-popup ref="popup" :maskClick="maskClick">
			<view class="login-pop">
				<view class="login-pop-item">
					<view class="bike-free">标题？</view>
					<view class="bike-desc">
						提示框内容？
					</view>
					<view class="bikebtn-group">
						<view class="btn-item reduce-btn" @tap.stop="cancelClick">{{option.cancelButtonText}}</view>
						<view class="empty"></view>
						<view class="btn-item main-btn" @tap.stop="confirmClick">{{option.confirmButtonText}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { rejects } from 'assert'
import { resolve } from 'path'
	export default {
		data() {
			return {
				option: {}
			}
		},
		// props:{
		// 	loginPopState: {
		// 	    type: Boolean,
		// 	    default: true
		// 	},
		// },
		// methods:{
		// 	cancel(){
		// 		this.loginPopState = false;
		// 		console.log('隐藏了')
		// 	},
		// 	toLogin(){
		// 		this.loginPopState = false;
		// 		uni.reLaunch({
		// 			url:'/pagesA/login/index'
		// 		})
		// 	}
		// }
		methods: {
		    open(option) {
				return new Promise((resolve,reject) =>{
					let defaultOption = {
						showCancelButton: false, // 是否显示取消按钮
						cancelButtonText: '取消', // 取消按钮文字
						showConfirmButton: true, // 是否显示确认按钮
						confirmButtonText: '确认', // 确认按钮文字
						confirm: null, // 点击确认后的逻辑
						cancel: null, // 点击取消后的逻辑
					}
					this.option = Object.assign({}, defaultOption, option)
					this.$refs.popup.open()
					this.option.confirm = this.option.confirm || function confirmResolve () {
						resolve(true)
					}
					 this.option.cancel = this.option.cancel || function cancelReject () {
						reject(false)
					}
				})
		    },
		    close() {
		            this.$refs.popup.close()
		    },
		    confirmClick() {
		            const confirmHandler = this.option.confirm
		            if (confirmHandler && typeof confirmHandler === 'function') {
		                    confirmHandler()
		            }
		            this.close()
		            this.$emit('confirm')
		    },
		    cancelClick() {
		            const cancelHandler = this.option.cancel
		            if (cancelHandler && typeof cancelHandler === 'function') {
		                    cancelHandler()
		            }
		            this.close()
		            this.$emit('cancel')
		    },
            //或者在open的基础上写其他方法
            confirm(msg, option = {}) {
                if (typeof msg === 'object') {
                    option = msg
                }     else {
                    option.msg = msg
                }
                    return this.open({
                        ...option,
                        showCancelButton: true,
                        type: 'confirm'
                })
            }
		}
	}
</script>

<style lang="scss">
	.login-pop {
		
	}
	.login-pop-item {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		padding: 26upx 30upx 40upx;
		background: #fff;
		border-radius: 20upx;
		.bikebtn-group{
			display: flex;
			width: 100%;
			.btn-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15upx;
				height: 90upx;
				font-weight: 500;
			}
			.empty{
				width: 50upx;
			}
			.reduce-btn{
				background: #F1F1F1;
				color: #747474;
			}
			.main-btn{
				background: $main-color;
				color: #fff;
			}
			.medium-btn{
				background: #FFF0E2;
				color: $main-color;
			}
		}
		.bike-free {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			color: #302F30;
			font-size: 34upx;
			font-weight: 600;
			margin: 30upx auto 50upx;
		}
		.bike-desc {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			margin: 30upx auto 60upx;
		}
	}
</style>

其他页面使用：

// pop.vue  可以使用uni-app的 [easycom组件规范](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83)，不用写import语句
<pop ref="pop"></pop>

// js部分
this.$refs.pop.open({
    //titile: '',  此处往组件传值
    confirm: () => {
        console.log('点击了确认')
    },
    cancel: () => {
        console.log('点击了取消')
    }
})
// 或者通过异步的方式调用
this.$refs.pop.confirm('是否确认？').then().catch()

这样就可以在其他不用在页面引入注册就直接使用了。

在H5端还可以根据文档的使用方法，进行一个全局的插入，初测此方法暂时不能在小程序端使用。正如文档所述：“由于小程序没有开放根标签，没有办法在根标签下追加全局标签，所以要使用组件必须在当前页面引入组件标签。”

通过文档配置完成即可可以全局使用，不需要在每个页面写标签使用，只需要调用api就即可