美文网首页
2019-08-08 ant-design-vue dateP

2019-08-08 ant-design-vue dateP

作者: rub1cky | 来源:发表于2019-08-08 16:07 被阅读0次

项目中适用ant-design-vue 作为UI框架作为开发框架, 可接口接受的时间是字符串格式 类似 1990-12-01 这种类型的
我想不能都在组件内进行转换吧, 原本框架使用返回的是一个moment对象, 各位可以到gayhub上看原moment的API

这边对原来datePicker进行包装,返回我需要的格式

<template>
  <a-date-picker :value="renderDateString" @change="onChange" v-bind="$attrs" v-on="event.other"></a-date-picker>
</template>
<script>
import moment from 'moment'
export default {
  name: 'VDatePicker',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String
  },
  methods: {
    onChange (date, dateString) {
      let dateEmit = date ? moment(date).format('YYYY-MM-DD') : null
      this.$emit('change', dateEmit)
    }
  },
  computed: {
    renderDateString () {
      return this.value ? moment(this.value) : this.init
    },
    event () {
      const { change, ...other } = this.$listeners
      return {
        change: this.onChange,
        other
      }
    }
  }
}
</script>

对原组件进行包装,简化大家的代码量

v-bind="$attrs"

v-on="$listeners"
是什么意思各位去自己查吧,不在解释了

相关文章

网友评论

      本文标题:2019-08-08 ant-design-vue dateP

      本文链接:https://www.haomeiwen.com/subject/vtixjctx.html