Question

我正在尝试编写一个简单的插件。这是一个向任何元素添加涟漪效应的指令。到目前为止，自定义指令工作正常（检查here），但我想将一些数据添加到Vue实例，以便用户可以全局修改某些值。我希望它能像这样使用。

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

这将修改此实例中所有ripple指令的颜色。据我所知，这没有记录，所以我检查一些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选项？有没有官方/标准的方法来做到这一点？

Answer 1

您无需定义反应性。

只需使用：

this.vm.$options.ripple.color

而不是：

this.vm.$ripple.color

https://jsfiddle.net/pespantelis/tzw9ho3k/6/

如何反应性地扩展Vue.prototype

1 个答案: