import { DatePicker } from 'ant-design-vue'
import moment from 'moment'
import { reactive, toRefs, watch } from '@vue/composition-api'
export default {
name: 'OleDatePicker',
model: {
prop: 'value',
event: 'change'
},
props: {
value: String
},
setup (props, { attrs, emit }) {
const state = reactive({ dateValue: null })
let { showTime } = attrs
watch(() => props.value, v => {
state.dateValue = v ? moment(v) : null
})
watch(() => state.dateValue, (v) => {
const format = showTime ? `YYYY-MM-DD HH:mm:ss` : `YYYY-MM-DD`
let dateEmit = v ? moment(v).format(format) : null
emit('change', dateEmit)
})
const handleChange = (date) => {
state.dateValue = date
}
return {
...toRefs(state),
handleChange
}
},
render () {
const props = {
attrs: this.$attrs,
props: {
...this.$attrs,
value: this.dateValue
},
on: {
...this.$listeners,
change: this.handleChange
}
}
return <DatePicker {...props}></DatePicker>
}
}
2020-01-20 基于Vue Composition API 封装的 ant-design-vue DatePicker组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
