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

Question

我正在尝试向自定义 vue 组件添加一个简单的 date-picker。我没有使用 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 组件

How to add vanilla .js to a custom Vue component

javascript

vue.js

vue-component

vuejs2

flatpickr