van-datetime-picker组件的封装

<template>
  <van-popup v-model="isShow"  v-bind="popupOption">
    <van-datetime-picker
      ref="nxDateTimePicker"
      v-model="pickerOption.currentDate"
      v-bind="pickerOption"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @change="handleChange"
    />

  </van-popup>
</template>

<script>

export default {
  inheritAttrs: false,
  props: {
    value: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: String,
      default: new Date()
    },
    popupConfig: {
      type: Object,
      default: () => ({})
    },
    // onConfirm 和 onSubmit都是点击完成按钮时触发
    onConfirm: {
      type: Function,
      default: () => { }
    },
    onSubmit: {
      type: Function,
      default: () => { }
    },
    onChange: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      popupOption: {
        position: 'bottom'
      },
      pickerOption: {
        type: 'time',
        showToolbar: true,
        currentDate: this.defaultValue
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  },
  watch: {
    isShow: {
      handler: 'handleShow',
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    handleShow(val) {
      if (val) {
        const { popupConfig } = this.$props
        popupConfig && Object.assign(this.popupOption, popupConfig)
        this.pickerOption = Object.assign({ }, this.pickerOption, this.$attrs)
      }
    },
    // 确认按钮
    handleConfirm(value) {
      this.onConfirm(value)
      this.onSubmit(value)
      this.handleCancel()
    },
    // 取消按钮
    handleCancel() {
      this.isShow = false
    },
    handleChange(picker) {
      this.onChange(picker)
    }
  }
}
</script>

最后

以上就是瘦瘦小馒头为你收集整理的van-datetime-picker组件的封装的全部内容，希望文章能够帮你解决van-datetime-picker组件的封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。