小程序全局弹框

使用的库 github.com/1977474741/…

使用的是uniapp，纪录一下使用vue-inset-loader 做小程序全局弹框的过程。

自定义一个弹框

<template>
	<view class="login-box" v-show="isShow">
		我是登录
	</view>
</template>

<script>
export default{
	data(){
		return{
			isShow: false
		}
	},
	methods:{
		show(){
			this.isShow = true
		},
		close(){
			this.isShow = false
		}
	}
}
</script>

<style lang="scss" scoped>
.login-box{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: red;
}
</style>

安装库

npm install vue-inset-loader --save-dev

vue.config.js（没有就创建一个）

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文件路径
						// options: {
						//     pagesPath: path.resolve(__dirname,'./src/pages.json')
						// }
					}
				}
			]
		},
	}
}

main.js

import LoginBox from "@/components/login/login.vue";
Vue.component('LoginBox',LoginBox)

pages.json配置文件中添加insetLoade

"insetLoader": {  
    "config":{
        "LoginBox": "<LoginBox ref='loginBoxRef'></LoginBox>"  
    },  
    "label":["LoginBox"],  
    "rootEle":"view"  
},

使用

在页面中就可以使用'this.$refs.loginBoxRef.show()'打开弹框了。