《实战》提示框

概述

参考 ElementUI Message 消息提示 的调用方式；

默认 3s 后销毁，当鼠标放在提示框上，重新开始销毁倒计时；

仅在页面右下角显示，提供 成功、警告 和 错误 3 种类型；

界面

实现

组件

MessageBox.vue

<template>
    <div 
        v-if="options.id" 
        :id="options.id" 
        :style="{width: `${options.width}px`}"
        :class="['message-box-main', options.type]" 
        @mouseover="mouseover"
        @mouseout="mouseout">
        <span class="info" :style="{width: `${options.width-70 + (options.showClose ? 0 : 70)}px`}" :title="options.message">{{options.message}}span>
        <span v-if="options.showClose" class="close" @click="close">
            <i class="el-icon-close" />
        span>
    div>
template>
<script>
export default {
    data() {
        return {
            options: {},
            timeoutId: ''
        }
    },
    methods: {
        // 鼠标 out 时重新开始销毁倒计时
        mouseout() {
            this.timeoutId = setTimeout(() => {
                this.close();
            }, this.options.duration)
        },
        // 鼠标 over 停止销毁倒计时
        mouseover() {
            clearTimeout(this.timeoutId)
        },
        close() {
            let boxEl = document.getElementById(this.options.id);
            boxEl.remove();
        }
    },
    mounted() {
        // 初始化成功就开始倒计时
        this.mouseout();
    }
}
script>
<style lang="stylus" scope>
.message-box-main {
    cursor: pointer;
    margin-top:2px;
    height: 50px;
    color:#fff;
    padding: 0 10px 0 20px;
    letter-spacing:1px;    
    font-family:MicrosoftYaHeiUI;    
    z-index: 2022;
    .info {
        font-size:14px;
        float: left;
        margin-top: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .close {
        display:flex;
        padding: 2px 10px;
        text-align: center;
        float: right;
        margin-top: 15px;
        cursor:pointer;
    }
}
.success {
    background: #157a51;
    border-bottom: 4px solid #41be8c;
}
.warning {
    background: #a57328;
    border-bottom: 4px solid #ecb96d;
}
.error {
    background: #680808;
    border-bottom: 4px solid #e35555;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

逻辑

MessageController.js

import Vue from 'vue'
import MessageBox from '../components/MessageBox.vue'

// 默认配置
let defaultOptions = {
    type: 'success', // 消息类型，有 3 种 success、warning、error
    message: '这是一个测试信息',
    showClose: true,
    duration: 3000,
    width: 400
}

// 第一步：创建消息容器，放在 body 末尾
let msgContainer = document.createElement('div');
msgContainer.id = 'msgContainer';   
msgContainer.style.position = 'absolute';
msgContainer.style.right = '2px';
msgContainer.style.bottom = '2px';
msgContainer.style.zIndex = 100;
document.getElementsByTagName('body')[0].appendChild(msgContainer);   

// 第二步：创建和挂载
function createMessage(options) {
    // 唯一 id
    let id = `msg${Math.floor(Math.random()*Math.pow(10,10))}`;
    // 创建 div
    let msgDiv = document.createElement('div');
    msgDiv.id = id;
    // 添加到消息容器
    msgContainer.appendChild(msgDiv);
    // 创建子类构造器
    let MessageBoxStructor = Vue.extend(MessageBox)  
    // new 类
    let msg = new MessageBoxStructor();
    // 配置参数，注意第一个参数必须是空，默认三秒
    msg.options = Object.assign({}, defaultOptions, { id }, options);
    // 挂载，相当于把创建的 div 给替换了
    msg.$mount(`#${id}`);
}

// 对外
function MessageController(options){
    createMessage(options)
}

// 简写：成功
MessageController.success = (message) => {
    createMessage({ type: 'success', message })
}
// 简写：错误
MessageController.error = (message) => {
    createMessage({ type: 'error', message })
}
// 简写：警告
MessageController.warning = (message) => {
    createMessage({ type: 'warning', message })
}
// 简写：警告
MessageController.warning = (message) => {
    createMessage({ type: 'warning', message })
}

export default MessageController
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

使用

main.js 引入

import MessageController from './js/MessageController'
Vue.prototype.$myMessage = MessageController;
1
2

参数说明

index.vue 使用

<template>
    <div 
        v-if="options.id" 
        :id="options.id" 
        :style="{width: `${options.width}px`}"
        :class="['message-box-main', options.type]" 
        @mouseover="mouseover"
        @mouseout="mouseout">
        <span class="info" :style="{width: `${options.width-70 + (options.showClose ? 0 : 70)}px`}" :title="options.message">{{options.message}}span>
        <span v-if="options.showClose" class="close" @click="close">
            <i class="el-icon-close" />
        span>
    div>
template>
<script>
export default {
    data() {
        return {
            options: {},
            timeoutId: ''
        }
    },
    methods: {
        // 鼠标 out 时重新开始销毁倒计时
        mouseout() {
            this.timeoutId = setTimeout(() => {
                this.close();
            }, this.options.duration)
        },
        // 鼠标 over 停止销毁倒计时
        mouseover() {
            clearTimeout(this.timeoutId)
        },
        close() {
            let boxEl = document.getElementById(this.options.id);
            boxEl.remove();
        }
    },
    mounted() {
        // 初始化成功就开始倒计时
        this.mouseout();
    }
}
script>
<style lang="stylus" scope>
.message-box-main {
    cursor: pointer;
    margin-top:2px;
    height: 50px;
    color:#fff;
    padding: 0 10px 0 20px;
    letter-spacing:1px;    
    font-family:MicrosoftYaHeiUI;    
    z-index: 2022;
    .info {
        font-size:14px;
        float: left;
        margin-top: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .close {
        display:flex;
        padding: 2px 10px;
        text-align: center;
        float: right;
        margin-top: 15px;
        cursor:pointer;
    }
}

.success {
    background: #157a51;
    border-bottom: 4px solid #41be8c;
}
.warning {
    background: #a57328;
    border-bottom: 4px solid #ecb96d;
}
.error {
    background: #680808;
    border-bottom: 4px solid #e35555;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85