105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<template>
|
||
<!-- 日 月 年 时间选择控件封装 -->
|
||
<div class="datetimepicker">
|
||
<el-select v-model="selectType" @change="dateTypeSelectChange" placeholder="请选择" style="width:65px;">
|
||
<el-option label="日" value="1"></el-option>
|
||
<el-option label="月" value="2"></el-option>
|
||
<el-option label="年" value="3"></el-option>
|
||
</el-select>
|
||
|
||
<el-date-picker
|
||
v-if="selectType === '1'"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
v-model="listQuery.day"
|
||
@change="dayChange"
|
||
type="date"
|
||
placeholder="选择日"
|
||
></el-date-picker>
|
||
|
||
<el-date-picker
|
||
v-if="selectType === '2'"
|
||
v-model="listQuery.month"
|
||
type="month"
|
||
format="yyyy-MM"
|
||
value-format="yyyy-MM"
|
||
:editable="false"
|
||
@change="monthChange"
|
||
placeholder="选择月"
|
||
></el-date-picker>
|
||
|
||
<el-date-picker
|
||
v-if="selectType === '3'"
|
||
v-model="listQuery.year"
|
||
type="year"
|
||
format="yyyy"
|
||
value-format="yyyy"
|
||
:editable="false"
|
||
@change="yearChange"
|
||
placeholder="选择年"
|
||
></el-date-picker>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "CustomDatePicker",
|
||
data() {
|
||
return {
|
||
selectType: '1', // 时间选择器当前的日期单位
|
||
listQuery: { // 绑定事件选择器当前的value
|
||
day: '',
|
||
month: '',
|
||
year: ''
|
||
}
|
||
}
|
||
},
|
||
props: {
|
||
value: String
|
||
},
|
||
methods: {
|
||
dateTypeSelectChange(val) {
|
||
this.selectType = val
|
||
this.listQuery.day = ''
|
||
this.listQuery.month = ''
|
||
this.listQuery.year = ''
|
||
this.$emit('input', '')
|
||
this.$emit('datetimeChange', '')
|
||
},
|
||
|
||
dayChange(val) {
|
||
val = val || ''
|
||
// 通信方式一
|
||
// 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit('input',val)自动修改父组件中v-model绑定的值
|
||
this.$emit('input', val)
|
||
// 通信方式二：子组件中的日期改变时，触发父组件中绑定的datetimeChange自定义事件
|
||
this.$emit('datetimeChange', val)
|
||
},
|
||
monthChange(val) {
|
||
val = val || ''
|
||
this.$emit('input', val)
|
||
this.$emit('datetimeChange', val)
|
||
},
|
||
yearChange(val) {
|
||
val = val || ''
|
||
this.$emit('input', val)
|
||
this.$emit('datetimeChange', val)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.datetimepicker {
|
||
width: 300px;
|
||
.el-select .el-input__inner {
|
||
border-radius: 4px 0 0 4px;
|
||
}
|
||
.el-date-editor .el-input__inner {
|
||
border-left: none;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
}
|
||
</style>
|
||
|