타사 라이브러리에서 vue.js 구성 요소 확장

타사 라이브러리에서 vue.js 구성 요소 확장

요소-ui의 구성 요소 ElDatepicker를 사용하고 있는데 템플릿과 이벤트 핸들러 방법을 변경하고 싶다.단일 파일 구성 요소로 이와 같은 작업을 수행하려고 함:

import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
var dpkr = Vue.component('ElDatePicker')
console.log(dpkr)
export default {
    extends: ['ElDatePicker']
}

하지만 그것은 효과가 없다.어떻게 하면 바꿀 수 있을까?

https://github.com/ElemeFE/element/tree/dev/packages/date-picker - 구성 요소 패키지

가장 큰 문제는 확장이 배열이 아니라 단일 구성요소를 지정해야 한다는 것이다.구성 요소를 참조해야 하며 이름은 참조하지 마십시오.

import Vue from 'vue';
import ElDatePicker from 'element-datepicker'

export default {
  extends: ElDatePicker
}

게시한 리포(repo 입니다.

하다npm install element-ui

다음:

import { DatePicker } from 'element-ui'
export default {
  // Use mixins for array syntax
  mixins: [DatePicker]
  // OR use extends without array
  extends: DatePicker
}

다음 명령을 사용하여 먼저 프로젝트에 요소 UI를 설치해야 함npm install element-ui. 그런 다음 main.ts/main.js 파일을 편집하고 추가해야 한다.

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

이것으로 너의 문제를 해결할 수 있을 것이다.자세한 도움말을 보려면 요소 UI를 선택하십시오.

참조URL: https://stackoverflow.com/questions/42049367/extend-vue-js-component-from-third-party-library