The front end is a daily shot|vue implements custom confirm pop-up window components

In the run-way full stack engineers on

Solve the problem

I have been working on the VUE H5 project recently. The project is based on the mit-ui framework. Mint-ui itself provides a confirm component, but the effect inside is inconsistent with the design renderings given by the UI. If you try to modify it based on his style, you can’t find it. To achieve the desired effect, I found many components on the Internet, but they did not have the effect that I wanted. Because there is a page that requires multiple pop-up windows, and some processing for cancellation and confirmation events, I can’t find it, so I manually encapsulated it. A component, how to realize the encapsulation of the yl-confirm component next.

Effect picture

Component function

1. Support custom content
2. Support confirmation callback
3. Support cancellation callback

Component source code 

The file name is yl-confirm.vue

<template>
		<div class="content-pop" v-if="bool_show">
			<div class="result" v-html="content"></div>
			<div class="bottom">
				<div class="cancel" @click="cancel">取消</div>
				<div class="confirm" @click="confirm">确定</div>
			</div>
		</div>
</template>

<script>
export default {
	name: 'msgConfirmPro',
	data() {
		return {
			bool_show: false,
			content: '',
			cancelBack:undefined,
			confirmBack:undefined,
		}
	},
	methods: {
		// 打开弹窗
		show(content,confirm,cancel) {
			if(confirm){
				this.confirmBack = confirm;
			}
			if(cancel){
				this.cancelBack = cancel;
			}
			this.content = content;
			this.bool_show = true;
		},
		cancel() {
			this.bool_show = false;
			if(this.cancelBack){
			this.cancelBack();	
			}
			
		},
		confirm() {
			this.bool_show = false;
			if(this.confirmBack){
				this.confirmBack();
			}
			
		}
	}
};
</script>

<style scoped="">
.content-pop {
    width: 250px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /* padding: 0.04rem 0 0 0; */
    box-sizing: border-box;
	background: #ffffff;
	    height: 149px;
	    border-radius: 24px;
}

.result {
overflow: auto;
    padding: 20px 30px;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* bottom: 87px; */
    font-size: 16px;
    position: absolute;
    text-align: center;
    color: #333;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.content-pop .bottom {
font-size: 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f5f5f5;
}

.content-pop .bottom .cancel {
color: #666666;
    width: 50%;
    height: 100%;
    line-height: 48px;
    text-align: center;
    border-right: 01px solid #f5f5f5;
}

.content-pop .bottom .confirm {
    color: #2283e2;
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 48px;
}

.content-pop .title {
	box-sizing: border-box;
	padding: 40px 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	color: #333;
	border-bottom: 0.003rem solid #f5f5f5;
}
</style>

how to use

<template>
  <div id="app" style="background-color: #ff0000;height: 100vh;">
    
	<div @click="show()">点击出现弹窗</div>
	
	<ylConfirm ref="MSGCONFIRMPRO"></ylConfirm>
	
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import ylConfirm from './components/yl-confirm.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,ylConfirm
  },methods:{
	  show() {
		  this.$refs.MSGCONFIRMPRO.show('我是弹窗里面的内容，我可以随便定义哦',
		  () => {
		  	// 确定的回调
			alert("点击了确认");
		  },
		  () => {
			  // 取消的回调
		  	alert("点击了取消");
		  })
	  }
	  
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>