vue 组件挂载到全局方法confrim实例

1.在components目录下创建confrim

2.在confrim目录中创建SxConfrim.vue,index.js这两个文件

注：这个组件里面引入的popup 只是一个自己封装的弹出动画的遮罩层组件，由于实现比较简单我就不贴代码了，本文章核心内容是组件挂载到全局方法

// SxConfrim.vue
<template>
	<view>
		<!-- 弹窗 -->
		<popup ref="popup">
			<view class="sx-main">
				<view class="sx-box">
					<view class="sx-title">
						{{msg}}
					</view>
					<view class="sx-operation top-line">
						<view class="sx-cancel right-line" @tap="cancel">{{cancelText}}</view>
						<view class="sx-confirm" @tap="confirm">{{confirmText}}</view>
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import popup from "@/components/popup.vue"
	export default {
		components:{
			popup
		},
		data(){
			return{
				parentData:""	// 父级数据
			}
		},
		props:{
			msg:{	//内容
				type:String,
				default:'1'
			},
			cancelText:{	//取消按钮
				type:String,
				default:'取消'
			},
			confirmText:{	//确定按钮
				type:String,
				default:'确定'
			},
			size:{	// 字体大小
				type:Number,
				default:28
			},
			maskClose:{
				type:Boolean,
				default:false
			},
			change:{	// 点击的方法
				type:Function,
				default:null
			}
		},
		mounted() {
			
		},
		methods:{
			open(data){
				if(typeof data !== 'undefined'){
					this.parentData = data
				}
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			confirm(){	// 确定
				this.close()
				if(this.change) this.change(true)
			},
			cancel(){ // 取消
				this.close()
				if(this.change) this.change(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
/* 弹窗 */
.sx-main{padding: 0 72rpx;width: 100vw;}
.sx-box{width: 100%;background: #FFFFFF;border-radius:6rpx;border-radius:12rpx;overflow: hidden;}
.sx-box .sx-title{color: #333333;font-size: 33rpx;min-height: 213rpx;display: flex;align-items: center;justify-content: center;}
.sx-operation{
	height: 88rpx;
	width: 100%;
	display: flex;
	font-size: 30rpx;/* margin-top: 20rpx; */
	>view{
		@include centered;
		flex: 1;
		height: 88rpx;
		font-size: 30rpx;
		&:first-child{
			background: #F2F2F2;
			color: #333333;
		}
		&:last-child{
			background: $gradual-color;
			color: #FFFFFF;
		}
	}
}
.sx-cancel{color: #666666;flex: 1;}
.sx-confirm{color: #0FC179;flex: 1;}
</style>

3.在confrim目录中的index.js

import SxMsg from './SxConfrim.vue'	// 这导入的时候改了一下名字
import Vue from 'vue'
let instance
export default{
	install(){
		function SxConfirm(msg,tapCallBack){
			// 判断是否已经创建
			if(instance){
				document.body.removeChild(instance.vm.$el)
			}
			const SxMsgConstructor = Vue.extend(SxMsg)
			instance = new SxMsgConstructor({
				propsData:{
					msg:msg,
					change:tapCallBack
				}
			})
			instance.vm = instance.$mount()
			document.body.appendChild(instance.vm.$el)
			// 打开弹窗(因为我那个popup组件需要调用方法才能弹出)
			instance.vm.open()
		}
		Vue.prototype.$SxConfirm = SxConfirm
	}
}

4.在main.js中引入

import SxConfirm from '@/components/msg/index'
Vue.use(SxConfirm)

5.调用方式

this.$SxConfirm("确定要下架吗?",(e)=>{
	if(e){
		// 点击了确定
		this.$toast("点击了确定")
	}else{
		// 点击了取消
		this.$toast("点击了取消")
	}
})

由于图片上传失败这里我放一个外链的gif效果演示图，点击前往