vue封装时间选择器

Vue中封装时间选择器可以通过自定义组件来实现。下面是一个简单的例子：

<template>
  <div>
    <input type="text" v-model="selectedDate" readonly @click="showDatePicker">
    <div v-show="showPicker">
      <div class="overlay" @click="hideDatePicker"></div>
      <div class="datepicker">
        <input type="date" v-model="selectedDate" @input="updateDate">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedDate: null
    };
  },
  methods: {
    showDatePicker() {
      this.showPicker = true;
    },
    hideDatePicker() {
      this.showPicker = false;
    },
    updateDate() {
      // 处理选择日期后的逻辑
    }
  }
};
</script>

<style>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.datepicker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
}
</style>

在上面的示例中，我们创建了一个包含一个文本输入框和一个日期选择器的组件。当用户点击输入框时，通过`showDatePicker`方法显示日期选择器。日期选择器使用`v-model`指令绑定选择的日期到`selectedDate`属性上。选择日期后，通过`@input`事件触发`updateDate`方法来处理选择日期后的逻辑。

需要注意的是，上述代码只是一个简单的示例，你可以根据自己的需求进行修改和扩展。