vue命令式弹窗组件封装及使用，跨平台组件

不多说，上代码

代码编写

//modal.vue  编写
<template>
    <u-popup v-model="show" mode="bottom" length="30%" :safe-area-inset-bottom="false" :mask-close-able="false"
        border-radius="14">
        <view class="popop_box">
            <view class="title" v-if="title">
                {{title}}
            </view>
            <view class="content">
                {{content}}
            </view>
            <view class="btn">
                <view class="item" :style="{color:cancelColor}" v-if="showCancel" @click="confirm('close')">
                    {{cancelText}}
                </view>
                
                <view class="item" :style="{color:confirmColor}" @click="confirm('confirm')">
                    {{confirmText}}
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
    let self;
    export default {
    name:'zscnb-modal',
        data() {
            return {
                show: false,
                title: '',
                confirmText: '确定',
                confirmColor: '#000',
                cancelText: '取消',
                cancelColor: '#999',
                content: '',
                success: null, //重点
                showCancel: true, // 不显示取消按钮

            }
        },
        created() {
            self = this
        },

        methods: {
            
            /**
             * @param {*} value 
             *  title  弹窗标题
             * 自定义命令件组件
             */
            showModal(params) {
                if (!params.content) return;
                self.title = params.title
                self.content = params.content
                self.success = params.success
                if (params.cancelColor) {
                    self.cancelColor = params.cancelColor
                }
                if (params.cancelText) {
                    self.cancelText = params.cancelText
                }

                if (params.confirmColor) {
                    self.confirmColor = params.confirmColor
                }
                if (params.confirmText) {
                    self.confirmText = params.confirmText
                }

                self.show = true
            },

            confirm(status) {
                this.show = false;
                self.success({
                    confirm: status == 'confirm',
                    cancel: status == 'close'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .popop_box {
        display: flex;
        flex-direction: column;
        font-size: 36rpx;

        .title {
            text-align: center;
            color: #101828;
            font-size: 36rpx;
            font-weight: blod;
            height: 120rpx;
            line-height: 120rpx;
        }

        .content {
            color: #979797;
            padding: 40rpx;
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .item {
                height: 98rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;

            }
        }
    }
</style>

使用

 <zscnb-modal ref="zscnb"/>
 import zscnbModal from '@/components/showModal/modal.vue'
 components: {
            
       zscnbModal
}

let zsc = this.$refs.zscnb
zsc.showModal({
  title:'系统提示',
   confirmText:'确定选择',
   confirmColor:'#f40',
   content:'真棒啊！！！！',
   success(res){
      console.log(res,'成功打印')
   }
})

利用父子之间通信的ref方法

就成功了，优雅代码就生成了