Question

我尝试将简单date-picker添加到自定义vue组件。我没有使用webpack，所以我想避免使用现成的.vue组件，而我更了解如何添加简单的javascript到vue。

我也见过this codepen，但我无法设置日期选择器。

这是我的jsfiddle：

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等的情况下轻松地将vanilla js集成到Vue组件中？

Answer 1

所以你在这里有一些误解。为了使它成为一个组件（一个非常基本的组件），你可以这样做。

在Vue中，您通常不会扩展外部Javascript库。您通常会将其称为包装器组件。本质上，Vue组件处理与外部库的所有交互。在这种情况下，您想使用Flatpickr。从documentation开始，您需要使用new Flatpickr(element, options)。所以我们可以在mounted事件中执行此操作，传递this.$el，它将指向根Vue组件元素。

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

这是您更新的fiddle。

但是这个组件并没有做太多。它只允许你选择一个日期。要允许该日期在外部组件中使用，我们希望将其扩展为支持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将收到您选择的日期。

以下是显示该内容的fiddle。

如何将vanilla .js添加到自定义Vue组件

1 个答案: