51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
||
<view class="date-picker-container">
|
||
<picker mode=multiSelector @change="bindPickerChange" :value="index" :range="range">
|
||
<slot />
|
||
</picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref } from 'vue'
|
||
import dayjs from 'dayjs'
|
||
|
||
// 定义生成 range 的值的方法
|
||
const getRange = () => {
|
||
const dateArr = [[], []]
|
||
for (var i = 2000; i <= 2099; i++) { dateArr[0].push(`${i}年`) }
|
||
for (var i = 1; i <= 12; i++) { dateArr[1].push(`${i}月`) }
|
||
return { dateArr }
|
||
}
|
||
|
||
export default {
|
||
name: 'date-picker',
|
||
setup(props) {
|
||
// range: 长度表示多少列，数组的每项表示每列的数据
|
||
const { dateArr } = getRange()
|
||
const range = ref(dateArr)
|
||
|
||
// index: 索引数组, 每一项的值表示选择了对应项中的第几个。
|
||
// date 获取时间
|
||
// 【[year, month]】 year、month 为选中的年月，例如选中2022年3月就是 year = 22、month = 2
|
||
const date = dayjs(props.date).format("YYYY-MM")
|
||
const year = Number(date.slice(2, 4))
|
||
const month = Number(date.slice(5, 7))
|
||
const index = ref([year, month - 1])
|
||
console.log(index.value)
|
||
|
||
// bindPickerChange: index 改变时触发该事件
|
||
const bindPickerChange = (e) => {
|
||
index.value = e.detail.value
|
||
console.log(`用户选中20${index.value[0]}年${index.value[1] + 1}月`)
|
||
}
|
||
|
||
return { index, range, bindPickerChange }
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.date-picker-container {
|
||
}
|
||
</style> |