前端每日一撸|vue实现自定义confirm弹窗组件

奔跑在全栈工程师的路上

解决问题

最近一直在做VUE H5 项目开发，项目是基于mit-ui框架，mint-ui本身提供了confirm组件，但是里面的效果和UI给的设计效果图不一致，尝试基于他的样式修改的话，发现也不能达到预期的效果,在网上找了许多组件，都没有自己想要的效果，因为有一个页面需要多个弹窗，并且针对取消和确认事件做些处理，实在找不到了，于是就手动封装了一个组件，接下来如何实现 yl-confirm组件的封装。

效果图

组件功能

1. 支持自定义内容
2. 支持确认回调
3. 支持取消回调

组件源码 

文件名为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>

如何使用

<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>

扫描二维码关注公众号，回复： 12970096 查看本文章