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>
|
|||
|
|
|