Picker.vue
<template><a-select v-model:value="value" :options="formattedMonths.map(item => ({ value: item }))" mode="multiple" placeholder="请选择季度" style="width: 100%"@change="change"><template #dropdownRender="{ menuNode: menu }"><div class="select-time" style="padding: 4px 8px; cursor: pointer" @mousedown="e => e.preventDefault()"><DoubleLeftOutlined color="#d7d7d7" @click="handleLeftButtonClick" /><div>{{ currentYear }}年</div><DoubleRightOutlined color="#d7d7d7" @click="handleRightButtonClick" /></div><a-divider style="margin: 4px 0" /><v-nodes :vnodes="menu" /></template></a-select>
</template>
<script>
import { DoubleLeftOutlined, DoubleRightOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { computed, defineComponent, defineExpose, ref } from 'vue'
import dayjs from 'dayjs'let index = 0
export default defineComponent({props: {types: {type: String,required: true,default: 1}},components: {PlusOutlined,DoubleLeftOutlined,DoubleRightOutlined,VNodes: (_, { attrs }) => {return attrs.vnodes}},setup(options, { emit }) {// 使用 ref 创建响应式变量let currentYear = ref(dayjs().format('YYYY'))const formattedMonths = computed(() => {let monthNames = nullif (options.types === 1) {monthNames = ['一季度', '二季度', '三季度', '四季度']} else {monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']}return monthNames.map(month => `${currentYear.value}年第${month}`)})const addItem = () => {console.log('addItem')// items.value.push(`New item ${index++}`);}const value = ref([])// 左切换按钮点击事件处理程序function handleLeftButtonClick() {currentYear.value = dayjs(currentYear.value).subtract(1, 'year').format('YYYY')}// 右切换按钮点击事件处理程序function handleRightButtonClick() {currentYear.value = dayjs(currentYear.value).add(1, 'year').format('YYYY')}function change(e) {emit('changeSelect', e)}defineExpose({value})return {value,formattedMonths,currentYear,handleLeftButtonClick,handleRightButtonClick,change}}
})
</script><style lang="scss">
.select-time {display: flex;padding: 3px 5px;box-sizing: border-box;align-items: center;justify-content: space-between;
}
</style>
使用
<Picker ref="pickerRef" :types="1"@changeSelect="onPickerChange" />
