<template>
|
<div class="time-select">
|
<div class="date-box" @click="select($event)">
|
<div :class="{on: dateType == 'date'}" :data-type="'date'" :data-holder="'选择日'">
|
<span :data-type="'date'" :data-holder="'选择日'">日</span>
|
</div>
|
<div :class="{on: dateType == 'month'}" :data-type="'month'" :data-holder="'选择月'">
|
<span :data-type="'month'" :data-holder="'选择月'">月</span>
|
</div>
|
<div :class="{on: dateType == 'year'}" :data-type="'year'" :data-holder="'选择年'">
|
<span :data-type="'year'" :data-holder="'选择年'">年</span>
|
</div>
|
</div>
|
|
<el-date-picker
|
class="emit-el-date-picker"
|
size="small"
|
v-model="currentDate"
|
:type="dateType"
|
:placeholder="datePlaceHolder"
|
></el-date-picker>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'DateSelect',
|
data () {
|
return {
|
dateType: 'month',
|
datePlaceHolder: '选择月',
|
currentDate: ''
|
}
|
},
|
|
methods: {
|
select (e) {
|
console.log(e.target.dataset.holder)
|
this.dateType = e.target.dataset.type
|
this.datePlaceHolder = e.target.dataset.holder
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.time-select {
|
margin-top: 20px;
|
padding: 0 4px;
|
display: flex;
|
align-items: center;
|
height: 34px;
|
|
.date-box {
|
margin-right: 20px;
|
display: flex;
|
box-sizing: border-box;
|
align-items: center;
|
height: 100%;
|
background: rgba(33, 186, 196, 0.1);
|
color: #a9d1d7;
|
|
& > div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 50px;
|
height: 100%;
|
cursor: pointer;
|
}
|
|
.on {
|
background: rgba(33, 186, 196, 0.5);
|
border: 1px solid #66dde9;
|
}
|
}
|
}
|
</style>
|
