我正在尝试将一个简单的
date-picker添加到自定义vue组件.我没有使用webpack,所以我想避免现成的.vue组件,而我更了解如何添加简单的javascript到vue.
我跟随this official vue tutorial
我也看过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组件中？
解决方法
所以你在这里有一些误解.要使它成为一个组件(一个非常基本的组件),这就是你可能会这样做的.
在Vue中,您通常不会扩展外部Javascript库.您通常会将其称为包装器组件.本质上,Vue组件处理与外部库的所有交互.在这种情况下,您想使用Flatpickr.从documentation开始,您需要使用新的Flatpickr(元素,选项).所以我们可以在挂载事件中执行此操作,传递此.$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)
}
},{})
}
})
现在,您可以像这样使用它.
<date-picker v-model="selectedDate"></date-picker>
selectedDate将收到您选择的日期.
这是一个fiddle显示.