由于项目中有需要使用年份范围选择器,而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是独立开的