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,
			};