구성 요소 방법 재정의

구성 요소 방법 재정의

vue용 구글 차트 플러그인인 VueCharts를 사용하고 있습니다.

새로운 머티리얼 디자인을 차트에 넣으려고 합니다."google.charts"를 통과하려고 했습니다.막대"를 차트 형식의 소품으로 사용했고 효과가 있었습니다.그러나 대부분의 옵션은 무시됩니다. 왜냐하면 구글 차트 문서에 기술된 바와 같이 옵션 객체는 다음을 사용하여 변환되어야 하기 때문입니다.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 docs에서 컴포넌트 메서드를 단순히 덮어쓸 수 있는 방법을 찾지 못했습니다.새로운 컴포넌트를 생성하여 변환된 옵션을 전달할 수 있지만, 플러그인에 의해 내부적으로만 로드되는 구글 오브젝트에 액세스해야 합니다.

믹스인을 사용할 수 있다는 것도 읽었습니다만, 방법은 불명확합니다.이것은 동작하지 않습니다.

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] :구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더링 함수가 정의되지 않았습니다(MyCustomChart에 있음).

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커스터마이즈하기 전에)

저는 이것을 가지고 장난을 쳤는데, 무엇을 연장해야 할지 추천을 해서 위의 @thanksd를 오해했습니다.한 가지 방법은 다음과 같습니다.

import VueChart from "vue-charts";

Vue.use(VueChart);

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

      return wrapper
    }
  }
});

Vue.component("custom-chart", CustomChart);

상세설명

역시 Vue Chart를 Vue의 네이티브 익스텐션으로 확장하거나lodash는 기대한 결과를 얻을 수 없습니다.VueChart를 가져온 결과는 플러그인 정의입니다.둘다요.lodash그리고.Vue는 이를 확장 대상으로 받아들이지만 둘 다 Vue 컴포넌트가 되지 않습니다.두 결과 중 하나를 사용하려고 하면 "템플릿 또는 렌더 함수가 정의되지 않음"이라는 오류가 발생합니다.그 오류는 전적으로 사실이다; 연장VueChart는, 인스톨 기능을 1개의 방법으로 확장합니다.

그럼 오브젝트를 어떻게 연장할 수 있을까요? vue-charts노출되지 않습니다.인스톨에서는, 콜만 행해집니다.Vue.component('vue-chart', Chart).

다행히 Vue는 글로벌하게 설치된 컴포넌트를 통해Vue.options.componentsVue.options.components["vue-chart"]부에

요.google@RegularEveryDayNormalGuy입니다.수 합니다.vue-chart사용합니다.하지만 그가 옳아요, 지금 당장은 이용할 수 없어요. vue-chart는 스크립트를 비동기적으로 로드합니다.다시 말씀드리지만 플러그인은 어떤 방법으로도 사용할 수 없습니다.비동기적으로 로드된 후에 자동으로 초기화됩니다.이 문제를 해결하는 방법은 여러 가지가 있지만, 이 시점에서는 풀 요청을 제출하는 것이 좋습니다.

원답

options의 속성입니다.vue-chart환된옵 옵션 ?냥 냥?? ???

new Vue({
    data:{
        convertedOptions: google.charts.Bar.convertOptions({<my options>})
    }
})

그리고 템플릿에

<vue-chart :options="convertedOptions"></vue-chart>

언급URL : https://stackoverflow.com/questions/43116647/overriding-a-component-method