uniapp 弹窗样式popup代替showModal

win

2021年7月新版本无需引用任何组件，只需引用css即可。
1.你创建的页面.vue或nvue,本人喜欢用vue.
2.文件如下：
<template>
        <view class="">

<button class="zai-btn popup-success" @click="Chebtn('success')">更新</button>


<!-- 提示窗示例 -->
//这个是提示的内容，可请参考pades/extUI/popup/popup.nvue
                        <uni-popup ref="alertDialog" type="dialog">
                                <uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm" @close="dialogClose">
                               </uni-popup-dialog>
                        </uni-popup>


</view>
</template>
<script>

        export default {
                data() {
                   return {
                                type: 'center',
                                msgType: 'success',
                                messageText: '这是一条成功提示',
                                value: ''
                        }
                },

methods: {

//提交的按钮*作，里面是type
                        Chebtn(type){

                     success: (e) => {
                                                if (e.data.code == 0) {
//当数据成功或失败回调以后，这里我不使用uni.showModal，直接使用                                                       
//this.msgType = type
//this.$refs.alertDialog.open()
                                                        /*uni.showModal({
                                                                title: '提示',
                                                                content: '更新成功',
                                                                //cancelText: "取消", // 取消按钮的文字
                                                                 confirmText: "确定", // 确认按钮文字
                                                                showCancel: false,
                                                                confirmColor: '#f55850',
                                                                //cancelColor: '#39B54A',
                                                        });*/
                                                        //用popup.vue的样式
                                                        this.msgType = type
                                                        this.$refs.alertDialog.open()
                                                       
                                                } else {

                                                        this.msgType = "更新失败"
                                                        this.$refs.alertDialog.open()
                                                }



},

}
}

win

CSS部分
<style lang="scss">
        @import '@/common/uni-nvue.scss';
@mixin flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
}
@mixin height {
        /* #ifndef APP-NVUE */
        height: 100%;
        /* #endif */
        /* #ifdef APP-NVUE */
        flex: 1;
        /* #endif */
}
.box {
        @include flex;
}
.button {
        @include flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 35px;
        margin: 0 5px;
        border-radius: 5px;
}

.button-text {
        color: #fff;
        font-size: 12px;
}
.popup-content {
        @include flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        height: 50px;
        background-color: #fff;
}
.popup-height {
        @include height;
        width: 200px;
}
.text {
        font-size: 12px;
        color: #333;
}
.popup-success {
        color: #fff;
        background-color: #e1f3d8;
}

.popup-warn {
        color: #fff;
        background-color: #faecd8;
}

.popup-error {
        color: #fff;
        background-color: #fde2e2;
}

.popup-info {
        color: #fff;
        background-color: #f2f6fc;
}
.success-text {
        color: #09bb07;
}

.warn-text {
        color: #e6a23c;
}

.error-text {
        color: #f56c6c;
}

.info-text {
        color: #909399;
}
.dialog,
.share {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
}
.dialog .button,
.share .button {
        /* #ifndef APP-NVUE */
        width: 100%;
        /* #endif */
        margin: 0;
        margin-top: 10px;
        padding: 3px 0;
        flex: 1;
}
.dialog-text {
        font-size: 14px;
        color: #333;
}
</style>

win

失败的回调还在研究。。。