外屏自定义弹框

1.dialogPm.vue

<template>
	  	<div class='dealInterface' v-if="isShow" @click="switchStatus">
  			<div class="dealInputOuter">
  				<div class="dealInputInner" v-if="switchStyle">
  					<p class="dialog-close" @click="closeMyself">
	       	
	       			</p>
  					<slot></slot>
  				</div>
  			</div>
  			<div class="dealInputInner_one" v-if="!switchStyle">
  				<slot></slot>
  			</div>
  		</div>
</template>

<script>

export default {
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    switchStyle:{
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  methods: {
    switchStatus () {
      this.$emit('switchdis');
    },
    closeMyself () {
      this.$emit('on-close')
    }
  }
}
</script>

<style scoped>

.dealInterface{
	position: fixed;
	top: 0;
	left: 50%;
    margin-left: -640px;
	width: 1280px;
	height: 1024px;
	overflow: hidden;
	background: rgba(0, 0, 0,0.302);
	z-index: 9999;
}
.dealInputOuter{
	width: 722px;
 	height: 484px;
	margin:250px auto 0;
	padding: 20px 20px;
	/*background: rgba(187, 187, 187,0.149);*/
	/*border: solid 1px rgb(255, 255, 255.3);*/
	border-radius: 20px;
	/*box-shadow: 0px 7px 45.9px 5.1px rgba(101, 101, 101, 0.81);*/
	/*box-sizing: border-box;*/
	text-align: center;
}
.dealInputInner_one{
	width: 681px;
 	height: 442px;
 	margin:238px auto 0;
 	border-radius: 20px;
 	background-color: rgb(255, 255, 255);
 	box-shadow: 0px 0px 18px 2px rgba(101, 101, 101, 0.15);
}
.dealInputInner{
	position: relative;
	width: 682px;
 	height: 442px;
 	border-radius: 20px;
 	background-color: rgb(255, 255, 255);
 	box-shadow: 0px 0px 18px 2px rgba(101, 101, 101, 0.15);
}
.remindTittle{
	font-size: 34px;
	color: rgb(29, 29, 29)	;
	text-align: center;
	padding:62px 0 40px;
}
.remindCon{
	width: 100%;
  	height: 140px;
	background-color: rgb(255, 244, 245);
	padding-top: 1px;
}
.remindInputStyle{
	width: 340px;
 	height: 80px;
	text-align: center;
	font-size: 25px;
	border-radius: 4px;
	background-color: rgb(255, 255, 255);
	line-height: 80px;
	margin:30px auto;
}
.remindFontStyle{
	font-size: 42px;
	color: #c30114;
	text-align: center;
	margin:51px auto;
}

/*双按钮间隔公共样式*/
.btn_position_out{
	position: absolute;
	bottom: 121px;
	width: 100%;
}
.btn_position_in{
	position: absolute;
	bottom: 45px;
	width: 100%;
}
.btn_bondMagin{
	margin: 0 20px;
	cursor: pointer;
}

/*关闭按钮*/
.dialog-close {
  position: absolute;
  width: 20px;
  height: 20px;
  right: -50px;
  top: 3px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
}
.dialog-close:hover {
  color: #4fc08d;
}
</style>

2.使用

<template>
<div>
<dialogPm v-if="isErroyTip">
			<div>
				<div class='diaTip'>
					{{tip}}
				</div>
				<div class="btn_position btn_position_in purchasePurchase">
					<a class="btn_style confirm_btn" @click="isErroyTip=false">确认</a>
				</div>
			</div>
		</dialogPm>
</div>
</template>
<script>
import dialogPm from '@/components/dialogPm'
	
		components:{dialogPm},
</script>