vuejs2 - 覆盖组件方法

Question

我正在使用 VueCharts这是一个用于 vue 的 Google Charts 插件。

我正在尝试为图表提供更新的 Material Design 外观。我试过将“google.charts.Bar”传递给图表类型 Prop ，它确实有效。然而，许多选项被忽略，因为正如 Google Charts docs 中所述。 ，options对象需要使用google.charts.Bar.convertOptions(options)进行转换，插件不做的事情。

查看源代码，该插件安装了一个“vue-chart”组件。该组件使用 ChartWrapper处理加载图表库，如下所示:

methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: options,
        containerId: containerId
      })

      return wrapper
    },

所以我只需要覆盖这个方法来转换选项，然后再将它们传递给 ChartWrapper。

但是如何？我还没有找到一种方法来简单地覆盖 vue 文档中的组件方法。我可以创建一个新组件并将转换后的选项向下传递，但我需要访问 google 对象，该对象仅由插件在内部加载。

我也读过我可以使用 mixin，但不清楚如何使用。这不起作用:

Vue.component('MyCustomChart', {
    mixins: ['vue-chart'],
    methods: {
        buildWrapper (chartType, dataTable, options, containerId) {
            let wrapper = new google.visualization.ChartWrapper({
                chartType: chartType,
                dataTable: dataTable,
                options: google.charts.Bar.convertOptions(options), // that's all I need
                containerId: containerId
            })

            return wrapper
        },
    }
})

[Vue warn]: Failed to mount component: template or render function not defined. (found in MyCustomChart)

Answer 1

您可以使用 Vue 的扩展方法来自定义插件组件。

在你的情况下:

import VueCharts from 'vue-charts'  
Vue.use(VueCharts);

const Base = Vue.options.components["vue-chart"];
const CustomChart = Base.extend({
  methods: {
    buildWrapper (chartType, dataTable, options, containerId) {
      let wrapper = new google.visualization.ChartWrapper({
        chartType: chartType,
        dataTable: dataTable,
        options: google.charts.Bar.coverOptions(options),
        containerId: containerId
      })

      return wrapper
    },
  })
}

Vue.component('MyCustomChart', CustomChart);

(感谢 Bert Evans 指出，在扩展到自定义之前，您需要从 Vue.options.components 中引用基础组件)