Vue-使用插件作为原型

时间:2019-02-19 15:47:16

标签: javascript vue.js vue-cli

我正在使用euvl/vue-notification来通知我的应用程序。每当我想通知用户时,我都需要编写以下代码:

如果在Vue组件中:

this.$notify({
    group: 'panel',
    type: 'success',
    duration: 5000,
    text: 'message'
})

或者在.js文件中:

Vue.notify({
    group: 'panel',
    type: 'success',
    duration: 5000,
    text: `message`
})

我想创建一个类似于event bus的支持文件,只需调用以下行以编写通知:

this.$notify('message')

这是我到目前为止尝试过的,但是没有成功...

main.js

import Vue from 'vue'
import App from './App.vue'
import notifications from './support/notifications'

Vue.use(notifications)

new Vue({
  render: h => h(App)
}).$mount('#app')

notifications.js

import Vue from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

export default function install(Vue) {
    Object.defineProperty(Vue.prototype, '$notify', {
        get(message) {
            return Vue.notify({
                group: 'panel',
                type: 'success',
                duration: 5000,
                text: message
            })
        }
    })
}

1 个答案:

答案 0 :(得分:2)

除了使用Object.defineProperty外,我认为您几乎达到了想要的目标。 尝试返回function引用而不是Vue.notify的{​​{1}}方法返回。

get