前沿

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

里边实现的功能有

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

在自己公共的组件文件夹下，这里一般都是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>