web/apps/bigmember_pc/src/components/selector/TimeSelector.vue

<template>
  <selector-card
    class="time-selector"
    :cardType="selectorType"
    @onConfirm="onConfirm"
    @onCancel="onCancel"
  >
    <div slot="header" :class="{ 's-header': selectorType === 'line' }">
      <slot name="header">选择时间</slot>
    </div>
    <TimeSelectorContent
      ref="content"
      :selectorTime="selectorTime"
      :selectorType="selectorType"
      :defaultSelectedKey="defaultSelectedKey"
      :showExact="showExact"
      :startPlaceholder="startPlaceholder"
      :endPlaceholder="endPlaceholder"
      @onChange="onChange"
    />
  </selector-card>
</template>

<script>
import SelectorCard from '@/components/selector/SelectorCard.vue'
import TimeSelectorContent from '@/components/selector/TimeSelectorContent.vue'
export default {
  name: 'time-selector',
  components: {
    SelectorCard,
    TimeSelectorContent
  },
  props: {
    selectorType: {
      type: String,
      default: 'line'
    },
    selectorTime: {
      type: String,
      default: 'default'
    },
    defaultSelectedKey: String,
    showExact: {
      type: Boolean,
      default: true
    },
    startPlaceholder: {
      type: String,
      default: ''
    },
    endPlaceholder: {
      type: String,
      default: ''
    },
    value: {
      type: [Object, String],
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  created() {},
  model: {
    prop: 'value',
    event: 'change'
  },
  watch: {
    value (val) {
      if (val) {
        this.setState(val)
      }
    }
  },
  methods: {
    setState(data) {
      return this.$refs.content.setState(data)
    },
    getState() {
      return this.$refs.content.getState()
    },
    onCancel() {
      this.$emit('onCancel')
    },
    onConfirm() {
      const state = this.getState()
      this.$emit('onConfirm', state)
    },
    onChange(state) {
      this.$emit('onChange', state)
      this.$emit('change', state)
    }
  }
}
</script>

<style lang="scss" scoped></style>