vue2中的底部弹出层Popup(类似购物车)

<template>
    <view v-show="isShow" class="mask" :style="{bottom:bottom}" @click="setShow">
        <scroll-view @click.stop scroll-y="true" class="container"
            :animation='animationData'>
            <slot></slot>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: "customPopup",
        props: {
            bottom: String,
            height: {
                type:String,
                default:'500rpx',        
            },
            duration:{
                type:Number|String,
                default:150
            }
        },
        data() {
            return {
                animationData: {},
                animation: {},
                isShow: false,
            };
        },
        methods: {
            setShow() {                
                const show = () => {
                    this.isShow = true;
                    this.animation.height(this.height).step()
                    this.animationData = this.animation.export()
                }
                const hide = () => {
                    this.animation.height(0).step()
                    this.animationData = this.animation.export()
                    setTimeout(() => {
                        this.isShow = false
                    }, this.duration)
                }
                if (this.isShow) {
                    hide()
                } else {
                    show()
                }
            }

        },
        mounted() {
            const animation = uni.createAnimation({
                duration: this.duration,
                timingFunction: "linear"
            })
            this.animation = animation
        }
    }
</script>

<style lang="less" scoped>
    .mask {
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        bottom: 0;
        z-index: 2;
        overflow: hidden;

        .container {
            width: 100vw;
            height: 0;
            background-color: #fff;
            position: absolute;
            bottom: 0;
            border-radius: 40rpx 40rpx 0 0;
        }
    }
</style>


// 父级调用
<template>
　　<customPopup bottom="106rpx" height="600rpx" ref="cPopup"><view @click='show'>点击</view></customPopup>
</template>
<script>
　　export default{
　　　　methods:{
　　　　　　show(){
　　　　　　　　this.$refs.cPopup.setShow() // setShow是子组件里面的方法
　　　　　　}
　　}
</script>