vue3：arco design message封装

1.新建一个message.ts

import { Message } from '@arco-design/web-vue'

// 定义一个唯一标识
const showMessage = Symbol('showMessage')

// 封装message类
class MessageBox {
    success(text: string, duration: number, show = true): void {
        this[showMessage]('success', text, duration , show)
    }
    error(text: string, duration: number, show = true): void {
        this[showMessage]('error', text, duration , show)
    }
    warning(text: string, duration: number, show = true): void {
        this[showMessage]('warning', text, duration , show)
    }
    info(text: string, duration: number, show = true): void {
        this[showMessage]('info', text, duration , show)
    }
    [showMessage](type: string, text: string, duration: number, show: boolean) {
        if (show) {
            // 判断是否已存在Message
            // if (document.getElementsByClassName('arco-message').length === 0) {
                Message[type]({
                    content:text,
                    duration,
                    closable:true
                })
            // }
        } else {
            // Message[type](text)
            Message[type]({
                content:text,
                duration,
                closable:true
            })
        }
    }
}

export default new MessageBox()```

2.在main.ts中导入message.ts文件

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

import { createApp } from ‘vue’
import ArcoVue from ‘@arco-design/web-vue’
import ArcoVueIcon from ‘@arco-design/web-vue/es/icon’
import MessageBox from ‘@/hooks/message’
app.use(ArcoVue, {})
app.use(ArcoVueIcon)
// 挂载到vue原型上
app.config.globalProperties.$message = MessageBox
app.use(router)
app.mount(‘#app’)

3、在页面上使用

1
2

import { getCurrentInstance } from ‘vue’
const { proxy }:any = getCurrentInstance() // 开发和生产都可以使用
proxy.$message.warning(‘操作成功’,10000*1000)

1