封装
/**
* @Author: 858834013@qq.com
* @Name: StartDate
* @Date: 2022-01-18
* @Desc: 开始时间
*/
<template>
<div>
<div @click="getshow">
<div class="selectbody1">
<text>{{value}}</text>
<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_down.png"
mode=""></image>
</div>
</div>
<u-datetime-picker :minDate="minData" :show="show" v-model="value" :title="title" @cancel="show=false"
@confirm="getConfirm" mode="date"></u-datetime-picker>
</div>
</template>
<script>
import dayjs from 'dayjs'
export default {
name: 'CommodityType',
props: {
value: {
type: '',
default () {
return {}
}
},
code: {
type: String,
default () {
return ''
}
},
title: {
type: String,
default () {
return ''
}
},
minData: {
type: Number,
default () {
return dayjs('2020').valueOf()
}
},
},
data() {
return {
show: false,
};
},
methods: {
getshow() {
this.show = true
},
getConfirm(e) {
var that = this;
if (e.value) {
that.$emit("update:value", dayjs(e.value).format('YYYY-MM-DD'));
} else {
that.$emit("update:value", dayjs(that.minData).format('YYYY-MM-DD'));
}
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
.selectbody1 {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
height: 60rpx;
background: #F5F6FC;
border-radius: 8rpx;
margin-right: 20rpx;
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
margin-left: 10rpx;
width: 70px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
image {
width: 21rpx;
height: 13rpx;
// margin-left: 18rpx;
margin-right: 16rpx;
}
}
</style>
使用
<StartDate :minData="minData" title='开始时间' :value.sync="StartTime"></StartDate>