vue封装全局确认弹窗

下载文件1、弹窗组件

<template>
    <view class="bombFrame" v-if="bshow" :class="show?'show':'hide'">
        <view class="telate" :class="show?'bshow':'bhide'">
            <view class="hint">
                <view>{{title}}</view>
                <view @touchstart.prevent="noClick">
                    <image src="./static/cha.svg" mode="" />
                </view>
            </view>
            <view class="promptContent">
                <view>
                    <image src="./static/gantan.svg" mode="" />
                </view>
                <view>{{content}}</view>
            </view>
            <view class="operate">
                <view @touchstart.prevent="noClick">{{noBtnText}}</view>
                <view @touchstart.prevent="yesClick">{{yesBtnText}}</view>
            </view>
        </view>
    </view>
</template>
<script>
/**
 *
 *
 *   this.$Message({ content: "模式未保存，确定离开？" })
            .then(() => {
                console.log("yes");
            })
            .catch(() => {
                console.log("cancel");
            });
 *
 *
 */
export default {
    props: {
        title: {
            type: String,
            default: "提示",
        },
        yesBtnText: {
            type: String,
            default: "确定",
        },
        noBtnText: {
            type: String,
            default: "取消",
        },
        hasMark: {
            type: Boolean,
            default: true,
        },
        content: {
            type: String,
            default: "此操作将永久删除该文件, 是否继续?",
        },
    },
    data() {
        return {
            promiseStatus: null,
            show: false,
            bshow: false,
        };
    },
    methods: {
        messag() {
            let _this = this;
            this.show = true;
            this.bshow = true;
            return new Promise(function (resolve, reject) {
                _this.promiseStatus = { resolve, reject };
            });
        },
        noClick() {
            this.show = false;
            setTimeout(() => {
                this.bshow = false;
            }, 500);
            this.promiseStatus && this.promiseStatus.reject();
        },
        yesClick() {
            this.show = false;
            setTimeout(() => {
                this.bshow = false;
            }, 500);
            this.promiseStatus && this.promiseStatus.resolve();
        },
        alertClick() {
            this.show = false;
            setTimeout(() => {
                this.bshow = false;
            }, 500);
            this.promiseStatus && this.promiseStatus.resolve();
        },
    },
};
</script>
<style lang='scss'>
@keyframes move {
    0% {
        background: rgba(0, 0, 0, 0.5);
        opacity: 1;
    }
    50% {
        background: rgba(0, 0, 0, 0.2);
    }
    100% {
        background: rgba(0, 0, 0, 0);
        opacity: 0;
    }
}
@keyframes move2 {
    0% {
        background: rgba(0, 0, 0, 0);
        opacity: 0;
    }
    50% {
        background: rgba(0, 0, 0, 0.2);
    }
    100% {
        background: rgba(0, 0, 0, 0.5);
        opacity: 1;
    }
}
@keyframes move4 {
    0% {
        background: rgba(255, 255, 255, 1);
        transform: translateY(0);
    }
    50% {
        background: rgba(255, 255, 255, 0.5);
    }
    100% {
        background: rgba(255, 255, 255, 0);
        transform: translateY(-50rpx);
        display: none !important;
    }
}
@keyframes move3 {
    0% {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50rpx);
    }
    100% {
        background: rgba(255, 255, 255, 1);
        transform: translateY(0);
    }
}
.show {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    animation: move2 0.5s; /*自定义动画名称*/
    animation-fill-mode: forwards; /*动画执行完后的状态*/
}
.hide {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    animation: move 0.5s; /*自定义动画名称*/
    animation-fill-mode: forwards; /*动画执行完后的状态*/
}
.bshow {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    animation: move3 0.5s; /*自定义动画名称*/
    animation-fill-mode: forwards;
}
.bhide {
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    animation: move1 0.5s; /*自定义动画名称*/
    animation-fill-mode: forwards; /*动画执行完后的状态*/
}
.bombFrame {
    position: fixed;
    z-index: 9900;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 9px 3px rgba(0, 0, 0, 0.5);
    .telate {
        background-color: #fff;
        border-radius: 20rpx;
        width: 700rpx;
        padding: 30rpx;
        box-sizing: border-box;
        .hint {
            display: flex;
            align-items: center;
            justify-content: space-between;
            > view:nth-child(1) {
                color: #303133;
                font-size: 32rpx;
            }
            > view:nth-child(2) {
                width: 50rpx;
                height: 50rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .promptContent {
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            > view:nth-child(1) {
                width: 50rpx;
                height: 50rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            > view:nth-child(2) {
                color: #606266;
                font-size: 28rpx;
                margin-left: 25rpx;
            }
        }
        .operate {
            display: flex;
            justify-content: end;
            margin-top: 30rpx;
            > view:nth-child(1) {
                padding: 15rpx 30rpx;
                font-size: 24rpx;
                border-radius: 6rpx;
                background: #fff;
                border: 1px solid #dcdfe6;
                color: #606266;
            }
            > view:nth-child(2) {
                padding: 15rpx 30rpx;
                font-size: 24rpx;
                margin-left: 20rpx;
                border-radius: 6rpx;
                background: #009788;
                border: 1px solid #dcdfe6;
                color: #ffffff;
            }
        }
    }
}
</style>

2、往vue中挂载组件 （创建js）

import Vue from 'vue'
import messag from './index.vue'
const VueComponent = Vue.extend(messag);
const vm = new VueComponent().$mount();
let init = false;
let defaultOptions = {
    yesBtnText: '确定',
    noBtnText: '取消'
};

const message = function (options) {
    Object.assign(vm, defaultOptions, options, {
        type: 'confirm'
    });
    if (!init) {
        document.body.appendChild(vm.$el);
        init = true;
    }
    return vm.messag();
};

export default message;

3、应用全局组件
3.1 在main.js中引入全局

import Message from '@/components/message/index'
Vue.prototype.$Message = Message;

 

3.2 页面中使用组件

this.$Message({ content: "模式未保存，确定离开？" })
.then(() => {
    console.log("yes");
}).catch(() => {
    console.log("cancel");
});