自定义js组件$Message（一）

message.vue页面代码

<template>
    <div class="msg-comp" :class="optionData.show ? 'slide' : ''" v-if="optionData.show">
        <div class="msg-content" :style="{backgroundColor: optionData['bg-color']}">
            <div class="msg-text" :style="{color: optionData['text-color']}">{{optionData.msg}}</div>
        </div>
    </div>

</template>

<script>

    export default {
        name: 'msg',
        props: {
            option: Object
        },
        data () {
            return {
                countValue: 22,
                isShow: false,
                optionData: {
                    'show': false, // 是否展示
                    'time': 2000,
                    'bg-color': '#79dcb5',
                    'text-color': '#fff',
                    'msg': ''// 消息内容
                }
            }
        },
        watch: {
            option: {
                handler (newOption, oldOption) {
                    if (newOption && typeof newOption === 'object') {
                        this.optionData = Object.assign(this.optionData, newOption)
                    }
                },
                immediate: true,
                deep: true
            }
        },
        methods: {},
        mounted () {
            if (typeof this.option === 'object') {
                this.optionData = Object.assign(this.optionData, this.option)
            }
            this.optionData.show = true
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$destroy()
                    document.body.removeChild(this.$el)
                }, this.optionData.time)
            })
        }
    }
</script>
<style lang="less" scoped>
    .msg-comp {
        position: fixed;
        left: 50%;
        opacity: 0;
        transform: translate(-50%, -50%);
        z-index: 10000;
        &.slide {
            animation: slide 0.5s normal;
            animation-fill-mode: forwards
        }
        .msg-content {
            width: 200px;
            height: 50px;
            text-align: center;
            border-radius: 10px;
            .msg-text {
                line-height: 50px;
            }
        }
    }

    @keyframes slide {
        from {
            top: -10%;
            opacity: 0;
        }
        to {
            top: 15%;
            opacity: 1;
        }
    }
</style>

vue挂载脚本代码

付费查看：传送门

使用示例

mounted() {
    setInterval(()=>{this.$Message('弹窗提示')}, 3000)
},