VUE自定义组件封装

在开发过程中，需要重新封装一下前端框架中的组件，从而适用于自己的项目，便于重用。
这次用的前端组件库是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.效果