在开发过程中,需要重新封装一下前端框架中的组件,从而适用于自己的项目,便于重用。
这次用的前端组件库是primevue。但是这个框架的日历控件有个bug,同时使用selectionMode=“range” :showTime="true"时,第二个时间选择不了,然后就想自己封装两个单独的时间范围选择框。
1.写一个自定义的compoment
<template>
<div class="FDateSelector">
<div class="p-field p-col-12 p-md-4">
<label>{{title}}</label>
<Calendar ref="startdate" style="width:132px" :locale="zh" dateFormat="yy-mm-dd" id="startdate" v-model="startdate"
selectionMode="single" :showTime="true" :manualInput="false"/>
-
<Calendar ref="finishdate" style="width:132px" :locale="zh" dateFormat="yy-mm-dd" id="finishdate" v-model="finishdate"
selectionMode="single" :showTime="true" :manualInput="false"/>
</div>
</div>
</template>
<script>
export default {
methods:{
getStartDate(){
return document.getElementById('startdate').value;
},
getFinishDate(){
return document.getElementById('finishdate').value;
}
},
name: "FDateSelector",
data() {
return {
startdate: null,
finishdate: null,
rangedate: null,
zh: {
firstDayOfWeek: 0,
ames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
today: '今天',
clear: '清空',
dateFormat: 'yy-mm-dd',
weekHeader: '周'
},
}
},
props: ['title']
}
</script>
<style scoped>
</style>
2.全局注册
3.调用,使用该控件,在props中可以传参
4.效果