quanyawei
2024-11-15 a19b20afeacf84c1c743c76b5018bcfbddac2270
src/components/Form/HourPicker.vue
@@ -1,10 +1,20 @@
<template>
  <el-date-picker
  <!-- <el-date-picker
    v-model="value1"
    type="date"
    placeholder="选择日期"
    value-format="yyyy-MM-dd"
  />
  /> -->
  <el-date-picker
    v-model="value1"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    value-format="yyyy-MM-dd HH"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>
<script>
@@ -12,7 +22,7 @@
// 例如:import《组件名称》from'《组件路径》';
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    // value1: String
@@ -21,7 +31,12 @@
    // 这里存放数据
    return {
      // newValue1: ''
      value1: ''
      value1: '',
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        },
      },
    }
  },
  // 计算属性 类似于data概念
@@ -31,16 +46,13 @@
    value1(nv, ov) {
      // this.newValue1 = nv
      this.sendPicker()
    }
    },
  },
  // 生命周期 - 创建完成(可以访问当前 this 实例)
  created() {
  },
  created() {},
  // 生命周期 - 挂载完成(可以访问 DOM 元素)
  mounted() {
  mounted() {},
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
@@ -52,10 +64,9 @@
  methods: {
    sendPicker() {
      this.$emit('sendPickerChild', this.value1)
    }
  } // 如果页面有keep-alive缓存功能,这个函数会触发
    },
  }, // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>