<template>
|
<el-date-picker
|
ref="timeBox"
|
:key="dataType"
|
v-model="value1"
|
class="box"
|
size="small"
|
:type="dataType"
|
range-separator="至"
|
:start-placeholder="startPlaceholderData"
|
:end-placeholder="endPlaceholderData"
|
popper-class="tpc"
|
:format="format"
|
:append-to-body="true"
|
:default-value="new Date()"
|
:value-format="valueFormat"
|
:picker-options="pickerOptions"
|
/>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
import dayjs from 'dayjs'
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {
|
dataType: {
|
type: String,
|
default: 'datetimerange'
|
},
|
},
|
data () {
|
// 这里存放数据
|
return {
|
newValue1: [],
|
value1: [],
|
format: 'yyyy-MM-dd HH',
|
valueFormat: 'yyyy-MM-dd HH',
|
startPlaceholderData: '开始日期时间',
|
endPlaceholderData: '结束日期时间',
|
pickerOptions: {
|
disabledDate: (time) => {
|
return time.getTime() > new Date()
|
},
|
},
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
value1 (nv, ov) {
|
console.log(nv, ov)
|
this.newValue1 = nv
|
this.sendPicker()
|
},
|
dataType (nv, ov) {
|
this.value1 = []
|
if (nv === 'datetimerange') {
|
this.startPlaceholderData = '开始日期时间'
|
this.endPlaceholderData = '结束日期时间'
|
this.format = 'yyyy-MM-dd HH'
|
this.valueFormat = 'yyyy-MM-dd HH'
|
this.value1 = [
|
dayjs().subtract(3, 'day').format('YYYY-MM-DD HH'),
|
dayjs().format('YYYY-MM-DD HH')
|
]
|
} else if (nv === 'daterange') {
|
this.startPlaceholderData = '开始日期'
|
this.endPlaceholderData = '结束日期'
|
this.format = 'yyyy-MM-dd'
|
this.valueFormat = 'yyyy-MM-dd'
|
} else if (nv === 'monthrange') {
|
this.format = 'yyyy-MM'
|
this.valueFormat = 'yyyy-MM'
|
this.startPlaceholderData = '开始月份'
|
this.endPlaceholderData = '结束月份'
|
}
|
}
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created () {
|
console.log('this.value1', this.value1)
|
// this.currentHour()
|
if (this.dataType === 'datetimerange') {
|
this.value1 = [
|
dayjs().subtract(3, 'day').format('YYYY-MM-DD HH'),
|
dayjs().format('YYYY-MM-DD HH')
|
]
|
}
|
},
|
methods: {
|
sendPicker () {
|
this.$emit('selectHourData', this.newValue1)
|
}
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style lang="scss">
|
/* ‘至’字 全部显示 */
|
.box .el-range-separator{
|
width: 20px !important;
|
}
|
/* 只显示时 隐藏分 */
|
.tpc .el-time-spinner__wrapper {
|
width:100% !important;
|
}
|
.tpc .el-scrollbar:nth-of-type(2) {
|
display: none !important;
|
}
|
</style>
|
