uni-app弹窗组件

//子组件
<template>
       <view class="show-box-bg wx-login-box" @tap.stop="$emit('cancel',2)">//触发取消
            <view class="conten" @tap.stop="$emit('confirm',1)">
            </view>
        </view>
</template>

<script>
    export default {
        props:['textmsg'],
        data() {
            return {
                
            }
        },
        methods:{
            operation(e){
                let type = e
                this.$emit('operation',type)
            },
        }
    }
</script>

//子组件样式
.wx-login-box {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 901;
    .conten {
        width: 80%;
        // height: 400px;
        background-color: #fff;
        z-index: 1000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 14rpx;
        overflow: hidden;
    }
}

//父组件
<text @click="punchRecord" >显示弹窗</text>
<calendar   :textmsg="textmsg" @cancel=operation(1) @confirm=operation(2) v-if="showTextmsg"></calendar>

<script>
//引入
import calendar from '@/components/calendar'
export default {
    data() {
    return {
        showTextmsg:false,
        textmsg:{
           activityInfo: {
               a:1,
               b:'你好'
           }
        }
    };
    },
    components: {
        calendar
    },
  methods: {
            opoperation(e) { //点击遮罩返回
                let that = this
                let type  = e
                if(type == 1){
                     //取消操作
                    that.showTextmsg = false
                }else{
                    that.showTextmsg = true
                }
            },
        punchRecord(){//点击事件
            this.textmsg = {
                activityInfo:this.activityInfo   //传值
            }
            this.showTextmsg = true //显示弹窗
        },
}
</script>