98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<style lang='scss' scoped>
|
|
.headerSelect{
|
|
width: 100%;
|
|
&-header{
|
|
display: flex;
|
|
border-bottom: 1px solid #dcdcdc;
|
|
background-color: #fff;
|
|
&-picker{
|
|
border-left: 1px solid #dcdcdc;
|
|
}
|
|
&-date,&-picker{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="headerSelect">
|
|
<view class="headerSelect-header">
|
|
<!-- <u-dropdown>
|
|
<u-dropdown-item v-model="dateType" :title="dateType==1?'日':'月'" :options="options2" @change="bindDropdownSwitchFn"></u-dropdown-item>
|
|
</u-dropdown> -->
|
|
<view class="headerSelect-header-date flex1" @click="dateSelectShow = true">
|
|
<text>{{dateType==1?"日":"月"}}</text>
|
|
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
|
</view>
|
|
<picker class="headerSelect-header-picker flex1" mode="date" :value="getDateValCmp" :fields="dateType==1?'day':'month'" @change="bindDateChange">
|
|
<text class="uni-input">{{getDateValCmp}}</text>
|
|
<u-icon name="arrow-down" class="pl10" color="#c0c4cc"></u-icon>
|
|
</picker>
|
|
</view>
|
|
<u-select v-model="dateSelectShow" :list="options2" @confirm="onDateConfirmFn"></u-select>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dateSelectShow:false,
|
|
dateType: 2,
|
|
options2: [
|
|
{
|
|
label: '日',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '月',
|
|
value: 2,
|
|
},
|
|
],
|
|
dateVal:""
|
|
}
|
|
},
|
|
props:{
|
|
// 默认日期
|
|
defaultDate:{
|
|
type:String,
|
|
require:true
|
|
}
|
|
},
|
|
watch:{
|
|
// defaultDate(newVal){
|
|
// this.dateVal = newVal;
|
|
// }
|
|
},
|
|
created() {
|
|
// this.dateVal = this.$u.timeFormat(this.defaultDate, this.dateType==1?'yyyy-mm-dd':'yyyy-mm');
|
|
// this.dateVal = this.defaultDate;
|
|
},
|
|
computed:{
|
|
getDateValCmp: {
|
|
get() {
|
|
return this.defaultDate;
|
|
},
|
|
set(val) {
|
|
this.defaultDate = val
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 日期切换
|
|
bindDateChange(e){
|
|
// this.dateVal = e.detail.value;
|
|
// this.defaultDate = e.detail.value;
|
|
this.$emit("onDateChangeFn",e.detail.value);
|
|
},
|
|
// 日月切换
|
|
onDateConfirmFn(arr){
|
|
this.dateType = arr[0].value;
|
|
this.$emit("onDateTypeChangeFn", arr[0].value);
|
|
},
|
|
}
|
|
}
|
|
</script>
|