添加全局事件总线
This commit is contained in:
parent
627badca26
commit
98a05b1f6a
19
README.md
19
README.md
@ -43,8 +43,24 @@ npm run dev:mp-weixin
|
|||||||
|
|
||||||
如果需要打开代码压缩,可以将vite.config.js中的build.minify赋值为true。
|
如果需要打开代码压缩,可以将vite.config.js中的build.minify赋值为true。
|
||||||
|
|
||||||
|
# 内置组件(geek-xd)
|
||||||
|
|
||||||
|
1. 颜色选择器组件
|
||||||
|
2. 二维码组件
|
||||||
|
3. 圆形菜单组件
|
||||||
|
4. 常用的订单组件
|
||||||
|
5. 信息展示组件
|
||||||
|
|
||||||
# 作者建议
|
# 作者建议
|
||||||
|
|
||||||
|
plugins下面的tab、auth、modal已经打了上详细的注释文档,使用代码提示的时候应该可以直接看到。
|
||||||
|
|
||||||
|
tab: 用于页面的跳转和页面间通讯
|
||||||
|
|
||||||
|
auth: 用于鉴权操作
|
||||||
|
|
||||||
|
modal: 用于弹窗
|
||||||
|
|
||||||
### 对于选项式
|
### 对于选项式
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@ -59,6 +75,9 @@ this.$modal // 建议使用this.$modal打开弹窗,理由:便于以后想要
|
|||||||
import tab from '@/plugins/tab' // 建议使用tab进行页面跳转,理由:便于在跳转前处理其他事务
|
import tab from '@/plugins/tab' // 建议使用tab进行页面跳转,理由:便于在跳转前处理其他事务
|
||||||
import auth from '@/plugins/auth' // 建议使用auth进行鉴权操作
|
import auth from '@/plugins/auth' // 建议使用auth进行鉴权操作
|
||||||
import modal from '@/plugins/modal' // 建议使用modal打开弹窗,理由:便于以后想要使用自定义弹窗
|
import modal from '@/plugins/modal' // 建议使用modal打开弹窗,理由:便于以后想要使用自定义弹窗
|
||||||
|
|
||||||
|
// 也可以使用下面的方式
|
||||||
|
import { tab, auth, modal} from '@/plugins'
|
||||||
```
|
```
|
||||||
|
|
||||||
### 对于ucharts
|
### 对于ucharts
|
||||||
|
|||||||
28
src/plugins/bus.ts
Normal file
28
src/plugins/bus.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
const event: { [key: string]: Function } = {}
|
||||||
|
/** 事件句柄 */
|
||||||
|
export default {
|
||||||
|
/** 绑定一个事件 */
|
||||||
|
$on(eventName: string, eventFun: Function) {
|
||||||
|
if (event.hasOwnProperty('key1')) {
|
||||||
|
throw new Error(`存在事件 => ${eventName}`)
|
||||||
|
} else {
|
||||||
|
event[eventName] = eventFun
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 解绑一个事件 */
|
||||||
|
$off(eventName: keyof typeof event) {
|
||||||
|
if (event.hasOwnProperty('key1')) {
|
||||||
|
delete event[eventName]
|
||||||
|
} else {
|
||||||
|
throw new Error(`不存在事件 => ${eventName}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 触发一个事件 */
|
||||||
|
$emit<T>(eventName: keyof typeof event, ...args: any):T {
|
||||||
|
if (event.hasOwnProperty('key1')) {
|
||||||
|
return event[eventName](...args)
|
||||||
|
} else {
|
||||||
|
throw new Error(`不存在事件 => ${eventName}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,11 +1,14 @@
|
|||||||
import Tab from './tab'
|
import Tab from './tab'
|
||||||
import Auth from './auth'
|
import Auth from './auth'
|
||||||
import Modal from './modal'
|
import Modal from './modal'
|
||||||
|
import Bus from './bus';
|
||||||
import { App } from 'vue';
|
import { App } from 'vue';
|
||||||
|
|
||||||
|
|
||||||
export const tab = Tab;
|
export const tab = Tab;
|
||||||
export const auth = Auth;
|
export const auth = Auth;
|
||||||
export const modal = Modal;
|
export const modal = Modal;
|
||||||
|
export const bus = Bus
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 在组合式API中可以通过 import { tab, auth, modal } form '@/plugins' 来使用tab、auth、modal
|
* 在组合式API中可以通过 import { tab, auth, modal } form '@/plugins' 来使用tab、auth、modal
|
||||||
@ -16,5 +19,6 @@ export default {
|
|||||||
app.config.globalProperties.$tab = tab
|
app.config.globalProperties.$tab = tab
|
||||||
app.config.globalProperties.$auth = auth
|
app.config.globalProperties.$auth = auth
|
||||||
app.config.globalProperties.$modal = modal
|
app.config.globalProperties.$modal = modal
|
||||||
|
app.config.globalProperties.$bus = bus
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user