弹出框

结构

：

<div class="parameter" @click="openParameter()">
	点击弹出
</div>
<div class="my-popup" v-show="popupVisible" ref="popup">
	弹出内容
</div>
//遮罩层
<div class="my-popup-show" v-if="popupVisible" @click.prevent="closePopup()"></div>

popupVisible控制是否弹出。

openParameter() {
	this.popupVisible = true;
},
closePopup() {
	var content = this.$refs.popup
	if (contentWrap) {
		if (!contentWrap.contains(event.target)) {
			/按钮以外的区域
			this.popupVisible = false
		}
	}
}

样式

	.my-popup {
		width: 90%;
		height: 60%;
		border-radius: 10px;
		position: fixed;
		background: #fff;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: .2s ease-out;
		transition: .2s ease-out;
		z-index: 2001;
	}
	.my-popup-show {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		opacity: 0.5;
		background: #000000;
		z-index: 2000;
	}