vue-cli-移动端底部弹出菜单动画效果

前沿

这是在做移动端经常会用到的效果，所以封装一下，方便以后使用。动画效果都已实现，只需要直接往里边写内容就好了。话不多说，上代码。

---

里边实现的功能有

点击按钮弹层由下渐渐弹入的动画效果
点击黑色遮罩区域关闭弹层
可以自由插入自己想要的内容

在自己公共的组件文件夹下，这里一般都是components下，新建一个CustomPopup文件夹，里边新建一个index.vue文件，这里边放的是封好的弹出框的组件。里边使用到了插槽slot，目的就是为了方便插入内容

index.vue

<template>
	<div>
		<!-- 弹出层 -->
		<div :class="{'CustomPopup':showCustomPopup}" @click="maskClick"></div>
		<div class="CustomPopupContent " :class="{'CustomPopupContentShow':showCustomPopup}">
			<slot name="PoperContent"></slot>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
               showCustomPopup: false,
			};
		},
		methods: {
			showCustom() {
				this.showCustomPopup = true;
			},
			maskClick() {
				this.showCustomPopup = false;
			}
		}
	}
</script>

<style scoped>
	.CustomPopup {
		height: 100%;
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.CustomPopupContent {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.CustomPopupContentShow {
		transform: translateY(0);
	}
</style>

接下来就是在你需要使用的页面直接引入，使用就可以了，下边展示一个demo.可以随意定义自己的内容。

<template>
<div>
<div class="DetailsTags" @click="showCustomPopupClick">
	<div class="Detailscenter F12 ML10">7天无理由退货</div>
</div >
<CustomPopup ref="CustomPopupRef">
	<div slot="PoperContent" class="PoperContentView">
	      <div class="ServiceNoteTitle W100">服务说明</div>
             <icon @click="closerButton" class="iconfont closer closerButton"></icon>					
	</div>
</CustomPopup>
</div>
</template>
<script>
	import CustomPopup from '../../components/CustomPopup/index.vue'
	export default {
		components: {
			CustomPopup
		},
		data() {
			return {
			}
		},
		methods: {
			showCustomPopupClick() {
				this.$refs.CustomPopupRef.showCustom();
			},
			closerButton() {
				this.$refs.CustomPopupRef.maskClick();
			}
		}
	}
</script>
<style scoped>
	.PoperContentView {
		height: 1000rem;
		background: #FFFFFF;
		border-top-left-radius: 16rem;
		border-top-right-radius: 16rem;
	}
	.ServiceNoteTitle {
		height: 100rem;
		border-bottom: 1px solid #EEEEEE;
		text-align: center;
		line-height: 100rem;
	}

	.closerButton {
		position: absolute;
		right: 10rem;
	}
</style>

结束语

至此，一个完整的自定义的弹出层就写好了，以后直接使用就可以了，有哪里不懂得小伙伴或者有什么改进的地方，评论区评论，大家一起进步。