cKey
5 years ago
committed by
GitHub
GitHub
18 changed files with 221 additions and 40 deletions
Binary file not shown.
@ -0,0 +1,21 @@ |
|||
import { PluginFunction } from 'vue' |
|||
|
|||
export declare class VueEvents { |
|||
static install: PluginFunction<never> |
|||
|
|||
emit(event: string, ...args: any[]): void |
|||
|
|||
fire(event: string, ...args: any[]): void |
|||
|
|||
on(event: string, callback: (eventData: any) => void): void |
|||
|
|||
listen(event: string, callback: (eventData: any) => void): void |
|||
|
|||
once(event: string, callback: (eventData: any) => void): void |
|||
|
|||
off(event:string, callback?: (eventData: any) => void): void |
|||
|
|||
unlisten (event:string, callback?: (eventData: any) => void): void |
|||
|
|||
removeAll(): void |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import './vue'; |
|||
import * as E from './events' |
|||
|
|||
declare namespace VueEvents { |
|||
export type VueEvents = E.VueEvents; |
|||
} |
|||
|
|||
declare class VueEvents extends E.VueEvents {} |
|||
|
|||
export default VueEvents |
|||
@ -0,0 +1,83 @@ |
|||
/** |
|||
* vue-event-handler typescript adapter |
|||
* src: https://github.com/sandeepk01/vue-event-handler
|
|||
* reference: https://github.com/cklmercer/vue-events
|
|||
*/ |
|||
|
|||
function plugin(Vue) { |
|||
if (plugin.installed) { |
|||
return |
|||
} |
|||
const evmap = {} |
|||
const events = new Vue({ |
|||
methods: { |
|||
fire(name, data = null) { |
|||
this.emit(name, data) |
|||
}, |
|||
emit(name, data = null) { |
|||
this.$emit(name, data) |
|||
}, |
|||
listen(name, cb) { |
|||
this.on(name, cb) |
|||
}, |
|||
listenOnce(name, cb) { |
|||
this.once(name, cb) |
|||
}, |
|||
on(name, cb) { |
|||
evmap[name] = cb |
|||
this.$on(name, cb) |
|||
}, |
|||
once(name, cb) { |
|||
evmap[name] = cb |
|||
this.$once(name, cb) |
|||
}, |
|||
off(name, cb) { |
|||
if (!cb) { |
|||
cb = evmap[name] |
|||
} |
|||
this.$off(name, cb) |
|||
}, |
|||
unlisten(name, cb) { |
|||
this.off(name, cb) |
|||
}, |
|||
removeAll() { |
|||
this.$off() |
|||
} |
|||
} |
|||
}) |
|||
|
|||
Vue.mixin({ |
|||
beforeCreate() { |
|||
if (typeof this.$options.events !== 'object') return |
|||
let eventMap = {} |
|||
for (const key in this.$options.events) { |
|||
eventMap[key] = this.$options.events[key].bind(this) |
|||
} |
|||
this.$once('hook:beforeMount', () => { |
|||
for (const key in eventMap) { |
|||
events.$on(key, eventMap[key]) |
|||
} |
|||
}) |
|||
this.$once('hook:beforeDestroy', () => { |
|||
for (const key in eventMap) { |
|||
events.$off(key, eventMap[key]) |
|||
} |
|||
eventMap = null |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
Vue.events = events |
|||
|
|||
Object.defineProperty(Vue.prototype, '$events', { |
|||
get() { |
|||
return events |
|||
} |
|||
}) |
|||
} |
|||
|
|||
if (typeof window !== 'undefined' && window.Vue) { |
|||
window.Vue.use(plugin) |
|||
} |
|||
|
|||
export default plugin |
|||
@ -0,0 +1,7 @@ |
|||
import VueEvents from './index'; |
|||
|
|||
declare module 'vue/types/vue' { |
|||
interface Vue { |
|||
$events: VueEvents |
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
import { Component, Vue } from 'vue-property-decorator' |
|||
|
|||
/** |
|||
* 封装领域事件组件 |
|||
* 提供简单的防重复订阅以及组件销毁自动注销事件功能 |
|||
*/ |
|||
@Component |
|||
export default class EventBusMiXin extends Vue { |
|||
protected eventMap = new Array<string>() |
|||
|
|||
/** |
|||
* 组件销毁事件 |
|||
* 注销所有事件 |
|||
*/ |
|||
destroyed() { |
|||
this.$events.removeAll() |
|||
this.eventMap.length = 0 |
|||
} |
|||
|
|||
/** |
|||
* 订阅事件 |
|||
* @param name 事件名称 |
|||
* @param callback 回调函数 |
|||
*/ |
|||
protected subscribe(name: string, callback: (eventData: any) => void) { |
|||
if (this.eventMap.includes(name)) { |
|||
return |
|||
} |
|||
this.eventMap.push(name) |
|||
this.$events.on(name, callback) |
|||
} |
|||
|
|||
/** |
|||
* 订阅事件一次 |
|||
* @param name 事件名称 |
|||
* @param callback 回调函数 |
|||
*/ |
|||
protected subscribeOne(name: string, callback: (eventData: any) => void) { |
|||
this.$events.once(name, callback) |
|||
} |
|||
|
|||
/** |
|||
* 注销订阅事件 |
|||
* @param name 事件名称 |
|||
* @param callback 注销回调 |
|||
*/ |
|||
protected unSubscribe(name: string, callback: (eventData: any) => void | undefined) { |
|||
this.$events.off(name, callback) |
|||
} |
|||
|
|||
/** |
|||
* 触发事件 |
|||
* @param name 事件名称 |
|||
* @param args 事件参数列表 |
|||
*/ |
|||
protected trigger(name: string, ...args: any[]) { |
|||
this.$events.emit(name, args) |
|||
} |
|||
} |
|||
Loading…
Reference in new issue