- 工作中需要用到单独是年的时间选择器,发现vant中唯独没有年的,所以自己写了一个,也不难,就是弹出层和选择器组合,为方便后续用,所以记录.
- 如果是按需引入,需要引入Popup 弹出层和Picker 选择器
<template>
<div>
<div class="navigate between_center">
<div class="timeSelect">
<div class="datetimePicker flex_items_center" @click="show = true">
点我啊
<van-icon name="play" style="transform: rotate(90deg)" />
</div>
</div>
</div>
<van-popup v-model="show" position="bottom" round>
<van-picker
title="选择选项时段"
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
/>
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
columns: ["2015", "2016", "2017", "2018", "2019", "2020", "2021"],
};
},
methods: {
onConfirm(value, index) {
this.show = false;
this.$toast(`当前值:${
value}, 当前索引:${
index}`);
},
onChange(picker, value, index) {
this.$toast(`当前值:${
value}, 当前索引:${
index}`);
},
onCancel() {
this.show = false;
this.$toast("取消");
},
},
};
</script>
<style lang="less">
// 头部导航
.navigate {
display: flex;
background: #fbfbfb;
// padding: 40px 44px 30px 44px;
margin-bottom: 10px;
font-size: 24px;
font-weight: 400;
// 时间选择
.timeSelect {
.datetimePicker {
font-size: 38px;
font-weight: 400;
color: #666666;
}
span {
margin-right: 8px;
img {
width: 30px;
height: 30px;
}
}
i {
font-size: 14px;
}
}
// 支出金额
.optionTime {
padding: 4px 18px;
font-weight: 400;
color: #fff;
background: #fb9d60;
border-radius: 24px;
i {
margin-left: 2px;
}
}
}
// 时间选择弹出框
.van-picker {
// 按钮大小
button {
font-size: 36px;
font-weight: 400;
color: #ff8f1f;
}
.van-picker__toolbar {
height: 80px;
button {
font-size: 30px;
}
.van-picker__title {
height: 100%;
display: flex;
align-items: center;
font-size: 36px;
font-weight: 400;
color: #333333;
}
}
// 日历日期文字大小
.van-ellipsis {
font-size: 38px;
font-weight: 400;
color: #333333;
}
// 时间背景色
.van-hairline-unset--top-bottom::after {
background-color: brown;
background: rgba(255, 143, 31, 0.17);
opacity: 0.35;
border-radius: 10px;
}
}
</style>