2016-06-14 111 views
2

我想寫一個簡單的插件。這是一個爲任何元素添加漣漪效應的指令。自定義指令到目前爲止工作正常(檢查here),但我想添加一些數據到Vue實例,以便用戶可以修改一些全局值。我喜歡它被這樣使用。如何擴展Vue.prototype

new Vue({ 
    ripple: { 
    color: '#f18c16' 
    } 
}) 

並且會在這種情況下修改所有紋波指令的顏色。據我所知,這是沒有記錄,所以我檢查了一些Vue插件litle,我來到這個代碼。

const ripple = { 
    color: '#000' 
} 
const init = Vue.prototype._init 

Vue.prototype._init = function(options) { 
    options = options || {} 
    Vue.util.defineReactive(this, '$ripple', ripple) 
    init.call(this, options) 
} 

而在我的指導我使用這樣的

if (this.modifiers.white) { 
    point.style['background-color'] = '#fff' 
    } else { 
    point.style['background-color'] = this.vm.$ripple.color 
    } 

但只增加了$ripple屬性我Vue的實例和我的預期是不工作的聲明。檢查here。所以,我的問題是如何使用爲我的指令定義的ripple選項?有沒有官方/標準的方式來做到這一點?

回答