美文网首页
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