如何将香草.js添加到自定义Vue组件中

Question

我正在尝试向自定义vue组件添加一个简单的选日期器。我不使用webpack，所以我想避免现成的.vue组件，我更了解如何向vue添加简单的javascript。

我在跟踪这是官方的vue教程

我也见过这个密码，但我无法让日期选择器出现。

这是我的小提琴

Html：

<div class="app">
  <datepicker id='date-elem'></datepicker>
</div>

app.js：

Vue.component('date-picker', {
  extends: Flatpickr,
  mounted () {
    this.Flatpickr(date-elem, {})}
})

如果不需要.vue文件，webpack等，我怎么能轻松地将香草js集成到Vue组件中呢？

Answer 1

你在这里有一些误解。要使它成为一个组件(一个非常基本的组件)，您可以这样做。

在Vue中，通常不会扩展外部Javascript库。您通常要做的是称为包装器组件。本质上，它是一个Vue组件，它处理与外部库的所有交互。在这种情况下，您想要使用Flatpickr。在文档中，您需要使用new Flatpickr(element, options)。因此，我们可以在mounted事件中这样做，传递指向根Vue组件元素的this.$el。

Vue.component('date-picker', {
    template: "<input type='text'>",
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

这是您更新的小提琴。

但是这个组件做的不多。它只允许你选择一个约会。为了允许在组件之外使用该日期，我们希望扩展它以支持v-model。你可能会这么做。

Vue.component('date-picker', {
    props:["value"],
    data(){
        return {
            selectedDate: this.value
        }
    },
    template: "<input type='text' v-model='selectedDate' @input='onInput'>",
    methods:{
        onInput(){
            this.$emit('input', this.selectedDate)
        }
    },
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

现在，你可以这样用它了。

<date-picker v-model="selectedDate"></date-picker>

selectedDate会收到你选择的日期。

这里有一个小提琴显示了这一点。