1,组件
<template>
<div class="year-range-picker">
<el-date-picker
v-model="startYear"
type="year"
:placeholder="config['archivesCenter:archiveList:startYear']"
size="mini"
class="year-picker"
style=" max-width: 150px !important;"
@change="changeStartYear"
format="YYYY"
value-format="YYYY"
>
</el-date-picker>
<span class="range-word"> {{config['archivesCenter:archiveList:to']}} </span>
<el-date-picker
v-model="endYear"
type="year"
:placeholder="config['archivesCenter:archiveList:endYeare']"
size="mini"
class="year-picker"
style=" max-width: 150px !important;"
@change="changeEndYear"
format="YYYY"
value-format="YYYY"
>
</el-date-picker>
</div>
</template>
<script setup lang="ts">
//导入多语言配置
import {languageData} from '~/stores/global'
import { ElMessage } from 'element-plus'
const config:any = computed(() => languageData().languageConfig.config);
interface IProps {
yearRange:Array
}
const props = withDefaults(defineProps<IProps>(), {
yearRange:[]
})
//绑定年份
const startYear =ref("")
const endYear =ref("")
const emits =defineEmits(['yearChanged'])
watchEffect(()=>{
startYear.value = String(props.yearRange[0]);
endYear.value = String(props.yearRange[1]);
})
const changeStartYear=(val) =>{
if (Number(val)&&Number(endYear.value)&&(Number(startYear.value) > Number(endYear.value))) {
startYear.value = ''
return ElMessage.error(config.value['archivesCenter:archiveList:timeTip'])
}
if (val) {
startYear.value = val;
}
let times=[Number(startYear.value) || '', Number(endYear.value) || '']
// 将改动传回父组件
emits("yearChanged", times);
}
const changeEndYear=(val) =>{
if (Number(val)&&Number(startYear.value)&&(Number(startYear.value) > Number(endYear.value))) {
endYear.value = ''
return ElMessage.error(config.value['archivesCenter:archiveList:timeTip'])
}
if (val) {
endYear.value = val;
}
let times=[Number(startYear.value) || '', Number(endYear.value) || '']
emits("yearChanged", times)
}
</script>
<style scoped lang="less">
.year-range-picker {
color: black;
text-align: center;
font-size: 18px;
}
.range-word {
margin-left: 10px;
margin-right: 10px;
}
.year-picker {
max-width: 100px !important;
}
</style>
2,组件使用
<!-- :yearRange 为父组件向子组件传参 -->
<!-- :key 保证父组件的数据更新后,重新渲染子组件,使子组件也同步更新 -->
<!-- @yearChanged 监听子组件向父组件传参 -->
<yearRangePicker
:yearRange="yearRange"
:key="`${yearRange[0]}_${yearRange[1]}`"
@yearChanged="handleYearChanged"
>
</yearRangePicker>`