使用vue自定义简单的消息提示框

<style scoped>
    /** 弹窗动画*/
    a {
        text-decoration: none
    }

    .drop-enter-active {
        /* 动画进入过程：0.5s */
        transition: all 0.5s ease;
    }

    .drop-leave-active {
        /* 动画离开过程：0.5s */
        transition: all 0.3s ease;
    }

    .drop-enter {
        /* 动画之前的位置 */
        transform: translateY(-500px);
    }

    .drop-leave-active {
        /* 动画之后的位置 */
        transform: translateY(-500px);
    }


    /* 盒子显示 */

    .message-dialog-display {
        display: flex;
        justify-content: center;
    }


    /* 文本显示 */

    .message-dialog-text {
        text-align: center;
    }


    /* 内容样式 */

    .message-dialog-align {
        align-content: center;
        align-items: center;
    }


    /* 最外层 设置position定位 */

    .message-dialog {
        position: relative;
        font-size: 1rem;
    }


    /* 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩 */

    .message-dialog-cover {
        position: fixed;
        z-index: 200;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }


    /* 内容层 z-index要比遮罩大，否则会被遮盖 */

    .message-dialog-content {
        position: fixed;
        top: 35%;
        flex-direction: column;
        z-index: 300;
        /* left: 2rem; */
        width: 99%
    }

    .message-dialog-header {
        /*  头部title的背景 居中圆角等属性。
     没有图片就把background-image注释掉 */
        /* background-image: url("../../static/gulpMin/image/dialog/dialog_head.png"); */
        width: 86%;
        height: 43px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background: #fbfbfb;
        border-bottom: 0.01rem solid #fbfbfb
    }

    .message-dialog-main {
        /* 主体内容样式设置 */
        background: #ffffff;
        width: 86%;
        padding: 1rem 0 1rem 0;
    }

    .message-dialog-footer {
        width: 86%;
        height: 40px;
    }

    .message-dialog-btn {
        width: 100%;
        height: 100%;
        background: #fbfbfb;
        position: relative;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        line-height: 40px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top: 0.01rem solid #fbfbfb
    }

    .message-dialog-sure a {
        display: inline-block;
        cursor: pointer;
        background: #d6d6d6;
        width: 4rem;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        border-radius: 0.2rem;
        margin: 0 1rem;
    }

    .message-dialog-close {
        width: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        text-align: center;
    }

        .message-dialog-close a {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

            .message-dialog-close a:hover {
                color: aqua
            }
</style>
@* <message-dialog :options.sync="options" v-on:close="close" :show.sync="showMessage" v-on:confirm="confirm" v-on:cancel="cancel"></message-dialog> *@
<template id="message_dialog">
    <div class="message-dialog">
        <div class="message-dialog-cover" v-if="myShow"></div>
        <transition name="drop">
            <div class="message-dialog-content message-dialog-display message-dialog-align"
                 v-bind:style="{width:myOptions.width '%',left:myOptions.leftWidth '%',top:myOptions.topDistance '%'}"
                 v-if="myShow">
                <div class="message-dialog-header message-dialog-text message-dialog-display message-dialog-align" v-if="myOptions.title">
                    <div>{{myOptions.title}}</div>
                </div>
                <div class="message-dialog-main message-dialog-text message-dialog-display message-dialog-align" v-bind:style="setStyle">
                    <div v-html="myOptions.content"></div>
                </div>
                <div class="message-dialog-footer" v-if="!myOptions.autoClose">
                    <div class="message-dialog-btn">
                        <div class="message-dialog-sure" v-if="myOptions.confirm">
                            <a v-on:click.stop="confirmed">确定</a>
                            <a v-on:click.stop="cancel">取消</a>
                        </div>
                        <div class="message-dialog-close" v-else>
                            <a v-on:click.stop="close">关闭</a>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<template id="message-modal">
    <div>
        <message-dialog :options.sync="options" v-on:close="close" :show.sync="showMessage" v-on:confirm="confirm"
                        v-on:cancel="cancel"></message-dialog>
    </div>
</template>
<script type="text/javascript">
    Vue.component("message-dialog", {
        template: '#message_dialog',
        props: {
            'options': {
                type: Object,
                default: () => {
                    return {};
                }
            },
            'show': {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                timers: [],
                myOptions: this.options,
                myShow: this.show
            };
        },
        methods: {
            confirmed(e) {
                this.$emit('confirm',e);
            },
            cancel() {
                this.$emit('cancel');
            },
            close() {
                this.$emit('close');
            },
            autoClose() {
                if (this.myOptions.autoClose) {
                    const t = setTimeout(() => {
                        this.close();
                    }, this.myOptions.showTime || 3000);
                    this.timers.push(t);
                }
            }

        },
        computed: {
            setStyle() {
                if (this.myOptions.autoClose && this.myOptions.title) {
                    return {
                        borderBottomLeftRadius: 10   'px',
                        borderBottomRightRadius: 10   'px',
                    };
                } else {
                    if (!this.myOptions.title) {
                        return {
                            borderTopLeftRadius: 10   'px',
                            borderTopRightRadius: 10   'px',
                        };
                    }
                }
            }
        },
        watch: {
            options() {
                this.myOptions = this.options;
                this.timers.forEach(timer => {
                    window.clearTimeout(timer);
                });
                this.timers = [];
                this.autoClose();
            },
            show(value) {
                this.myShow = value;
            }
        },
        mounted() {

        },
    });


    var messageDialog = new Vue({
        el: '#message',
        template: "#message-modal",
        data: {
            options: {},
            showMessage: false,
            func: ""
        },
        methods: {
            show: function (msg, title, issure, autoClose, showTime) {
                if (!msg) {
                    return this;
                }
                this.options = {
                    content: msg,
                    title: title,
                    autoClose: autoClose,
                    showTime: showTime || 3000,
                    confirm: issure
                };
                this.showMessage = true;
                return this;
            },
            showMsg: function (msg, autoClose, showTime) {
                return this.show(msg, null, false, autoClose, showTime);
            },
            showHeaderMsg: function (title, msg, autoClose, showTime) {
                return this.show(msg, title, false, autoClose, showTime);
            },
            showConfirm: function (title, msg, func) {
                this.func = func;
                return this.show(msg, title, true);
            },
            close: function () {
                this.showMessage = false;
            },
            confirm: function (envent) {
                if (this.func && this.func instanceof Function) {
                    this.func(envent, this);
                }
                this.showMessage = false;
            },
            cancel: function () {
                this.showMessage = false;
            }
        }
    });
</script>

 

更多专业前端知识，请上 【猿2048】www.mk2048.com