Внедрение свойств по умолчанию в сторонний компонент Vue - PullRequest
Новая
       8

Внедрение свойств по умолчанию в сторонний компонент Vue

0 голосов
/ 01 октября 2018

Я использую компонент datepicker в моем проекте.Базовое использование будет выглядеть следующим образом: 

date-picker(language="fr" v-model="date")

Существует несколько атрибутов, которые будут повторяться каждый раз, когда нам нужно будет использовать средство выбора даты: например, language.

Поэтому я бы хотелчтобы иметь возможность просто делать это, когда требуется средство выбора даты. 

date-picker(v-model="date")

И это будет по умолчанию fr для свойства language сторонней библиотеки.

Здесьвот что я пробовал:

  • Пользовательский компонент, который расширяет компонент Datepicket: не так уж и много, как мне нужно, чтобы определить шаблон, который содержит оригинальный компонент выбора даты.Это переводит лишний компонент оболочки
  • Плагин?Я могу только внедрить свойства в глобальный экземпляр Vue.(довольно плохо знаком с Vue)
  • Mixin не применяется, так как мне нужно будет изменить сторонний компонент

1 Ответ

0 голосов
/ 01 октября 2018

Не уверен, как вы расширили компонент.Но это должно быть достаточно элегантно?

, например, 

Vue.component("extended-datepicker", {
  extends: vuejsDatepicker,
  props: {
    format: {
      default: "yyyy MMM(MM) dd"
    },
    language: {
        default: fr
    }
  }
});

демо: https://jsfiddle.net/jacobgoh101/5917nqv8/2/

Обновление для проблемы, где "для обеспечения тега шаблона требуется один компонент файла "

Компонент Vue - это, по сути, объект JavaScript с определенными свойствами.

Вам не всегда нужно использовать .vue компонент одного файла.В этом случае вы можете просто создать файл .js, который экспортирует объект.

Например, этот ExtendedDatepicker.js будет допустимым компонентом Vue 

import Datepicker from "vuejs-datepicker";

export default {
  extends: Datepicker,
  props: {
    format: {
      default: "yyyy MMM(MM) dd"
    }
  }
};

demo: https://codesandbox.io/s/9kn29053r

...