一、背景
项目中必然存在报错的问题，我们需要对报错进行处理，所以需要进行统一的封装。
一下为nuxt.js项目为例： 目前支持 刷新和返回首页， 可进行新增配置
二、配置
在 mall-marketing/components/layouts/mask 目录下进行了封装
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
| YMask.vue (UI 样式)
index.js YxtMask.ts 逻辑的书写
// index.js
import { Vue } from 'nuxt-property-decorator'
import YMask from './YMask.vue'
export default class Notification {
constructor() {
this.component = ''
}
static newInstance(properties) {
const _props = properties || {}
const Instance = new Vue({
render(h) {
return h(YMask, {
props: _props,
})
},
})
this.component = Instance.$mount()
document.body.appendChild(this.component.$el)
}
static close() {}
}
// YxtMask.ts
import Notification from './index.js'
function hide() {
const list = document.getElementsByClassName('global-yxt-notification')
const notifications = [...list]
notifications.forEach((item: { parentNode: any }) =>
item.parentNode.removeChild(item)
)
}
function notice(content = '', btnType = 0) {
if (content === '') {
return
}
Notification.newInstance({
content,
btnType,
})
}
export default {
mask(content: string, btnType: number) {
notice(content, btnType)
},
hide() {
hide()
},
}
|
三、使用
1.注册到vue 下面 直接通过this使用
1
2
3
4
5
6
7
8
9
10
11
| mall-marketing/plugins/comp.ts
import { Vue } from 'nuxt-property-decorator'
import mask from '~/components/layouts/mask/YxtMask'
declare module 'vue/types/vue' {
interface Vue {
$Mask: any
}
}
Vue.prototype.$Mask = mask
|
在vue页面内通过 this.$Mask.mask(‘返回首页’, 1) 使用
2.在 js 或者 ts 内使用
1
2
3
| import Mask from '~/components/layouts/mask/YxtMask'
Mask.mask('别紧张，试试看刷新页面～', 0)
|
