uni-app 求可多选的时间插件

在uni-app中实现一个多选时间插件，你可以借助一些现有的UI组件库，比如uView UI或者Vant Weapp，这些库提供了丰富的组件，可以大大简化开发过程。以下是一个使用uView UI实现多选时间插件的示例。

首先，确保你的uni-app项目已经安装了uView UI。如果还没有安装，可以通过以下命令安装：

npm install uview-ui --save

然后，在你的main.js中引入uView UI：

import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'

Vue.use(uView)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

接下来，在你的页面组件中，使用uView提供的u-picker组件来实现时间选择，并通过一些逻辑来实现多选功能。由于uView的u-picker默认不支持多选，我们需要借助一些额外的逻辑来模拟这一功能。

<template>
  <view>
    <u-button @click="showPicker = true">选择时间</u-button>
    <u-popup v-model="showPicker" mode="bottom" :style="{height: '50%'}">
      <view class="picker-container">
        <u-picker
          :range="timeRanges"
          @change="onPickerChange"
          mode="multiSelector"
          :value="selectedTime"
          :cols="2"
        ></u-picker>
      </view>
      <view class="picker-footer">
        <u-button @click="confirmSelection">确定</u-button>
        <u-button @click="showPicker = false">取消</u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      timeRanges: [
        // 年份
        Array.from({ length: 10 }, (_, i) => (new Date()).getFullYear() - i),
        // 月份
        Array.from({ length: 12 }, (_, i) => i + 1)
      ],
      selectedTime: [0, 0]
    }
  },
  methods: {
    onPickerChange(e) {
      this.selectedTime = e.detail.value;
    },
    confirmSelection() {
      console.log('Selected Time:', this.selectedTime);
      this.showPicker = false;
    }
  }
}
</script>

<style>
.picker-container {
  padding: 20px;
}
.picker-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

上述代码提供了一个基本的多选时间选择器框架，但请注意，u-picker的multiSelector模式在某些平台上可能不完全支持。在实际开发中，你可能需要根据具体需求进一步调整和优化代码。