封装element-plus年份范围选择器

由于项目中有需要使用年份范围选择器，而element-plus没有提供，故进行二次封装组件，效果图：

基本功能：因为新增和编辑中都需要用到该组件，所以该组件需要能够动态的拿到值（新增拿到值）和回显值（编辑时回显），并且可以触发element的Rules

<script setup lang="ts">
import { ref, watch } from 'vue';
interface Props {
  modelValue: string;
}
// 接收组件的v-model绑定值
const props = defineProps<Props>();
// 向组件的v-model发送值
const emit = defineEmits<{
  (e: 'update:modelValue', date: string): void;
}>();
const year = ref(); // 开始年
const year1 = ref(); // 结束年

watch(() => props.modelValue,(val) => {
  if (val) {
    const [start, end] = val.split('/'); // 赋值时的格式同样为 2015/2018，然后解构赋值给year和year1
    year.value = start;
    year1.value = end;
  }
},{
  immediate: true
});

watch([year, year1], ([year, year1]) => {
  if (year && year1) {
    emit('update:modelValue', `${year}/${year1}`); // 向父组件发送值，值的格式为 2015/2018
  }
});
</script>
<template>
	<el-date-picker
      v-model="year"
      value-format="YYYY"
      type="year"
      placeholder="请选择开始年"
    />
    <div class="segmentation">至</div>
    <el-date-picker
      v-model="year1"
      value-format="YYYY"
      type="year"
      placeholder="请选择结束年"
    />
</template>

第一眼看这些代码可能会造成死循环但是并不会,两个watch是独立开的