8

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

我正在关注这个官方的 vue 教程

我也看过这个 codepen，但我无法让日期选择器出现。

这是我的jsfiddle：

html:

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

应用程序.js：

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

如何在不需要 .vue 文件、webpack 等的情况下轻松地将 vanilla js 集成到 Vue 组件中？

4

1 回答 1

16

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

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

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 将收到您选择的日期。

这是一个显示这一点的小提琴。

于 2017-04-28T14:55:49.683 回答