Vue开发插件-消息提示组件

一、初始版本

1.封装消息提示组件

自己写一个消息组件，样式可以先自己设置，后续可优化，以下是我的消息组件：Message.vue

<template>
    <div :class="['message', 'message-' + type]" v-if="show">
        <div class="message-text">
            <div class="message-title" v-if="title !== ''">{{title}}</div>
            <div class="message-content">
                提示信息：{{message}}
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        name: 'TMessage',

        props: {
            message: {
                type: String,
                default:''
            },
            title: {
                type: String,
                default:''
            },
            type: {
                type: String,
                default: 'success'
            },
            duration: {
                type: Number,
                default: 3000
            }
        },

        data() {
            return {
                show: false,
            }
        },

        mounted() {
            this.show = true;
            let timer = setTimeout(() => {
                if (this.show) {
                    this.close(timer);
                }
            }, this.duration);
        
        },

        methods: {
            close(timer) {
                this.show = false;
                clearTimeout(timer);
                timer = null;
            }
        }
    }
</script>
<style scoped>
.message {
    position: fixed;
    right: 10px;
    top: 20px;
    z-index: 999;
    width: 320px;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}

.message-title {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: bold;
}

.message-content {
  font-size: 12px;
}

.message-actions{
  display: flex;
  justify-items: center;
}

.message-success {
    background-color: #f0f9eb;
    border: 1px solid #67C23A;

}

.message-success .message-title, .message-success .message-content {
    color: #67C23A;
}

.message-warning {
    background-color: #fdf6ec;
    border: 1px solid #E6A23C;;

}

.message-error .message-title, .message-error .message-content {
    color: #E6A23C;
}

.message-error {
    background-color: #fef0f0;
    border: 1px solid #F56C6C
}

.message-error .message-title, .message-error .message-content {
    color: #F56C6C;
}

</style>

props中的内容是后续可以通过调用的方法传进去的参数，可以先把组件的代码写死，后续根据想优化的内容进行传参设置

2.使用install注册组件

通过install注册组件的步骤主要有以下几步（仅适用于）：

1. 对外暴露一个install方法，供main.js中的Vue.use()使用
2. 在install方法中通过Vue.extend()创建一个子类
3. 将刚创建的子类实例化
4. 创建一个空的标签，挂载到空标签上
5. 挂载到全局节点上 ps: 以下我是将消息提示组件的一些必要方法挂载到Vue的原型上，然后在show方法中做的以上操作，但大致步骤就是以上几个步骤

附上代码：Message.js

import Message from './Message.vue';

export default {
    // 向外暴露install方法
    install(Vue) {
        let message = null;

        function show(props) { // 添加方法，后面挂载到$message上
            if (!message) {
                const messageConstructor = Vue.extend({ // 使用 Vue 构造器，创建一个子类
                    render(h) {
                        return h(Message, {
                            props: {...props} // 将通过this.$message.show传进来的props传入组件中
                        })
                    }
                });
                let instance = new messageConstructor(); // 实例化

                this.vm = instance.$mount(document.createElement('div')) // 创建一个空的div标签并挂载到上面
                document.body.appendChild(this.vm.$el); // 挂载到全局节点
            }
        }

        Vue.prototype.$message = {
            show,
        }
    }
}

3.全局挂载

在mian.js中引入

import Message from '../src/components/Message/Message.js'; // 注意引入的路径
Vue.use(Message); // 会去执行Message.js中的install方法

4.使用方式

在页面中通过以下方式使用：

    this.$message.show({
        title:'这是标题',
        message: '失败',
        type: 'error',
        duration: 5000
    });

二、优化版本

优化的地方：

• 添加进入页面和消失的动画
• 多条消息时，之前的消息依次往下移动 ...未完待续