89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<!-- form表单中日历样式的组件-->
|
|
<template>
|
|
<div>
|
|
<van-field
|
|
readonly
|
|
:class="readonly ? 'field-readonly' : 'not-field-readonly'"
|
|
clickable
|
|
type="text"
|
|
name="calendar"
|
|
:value="value"
|
|
v-bind="$attrs"
|
|
v-on="childListeners"
|
|
@click="clickField"
|
|
/>
|
|
<van-calendar
|
|
color="#3074F6"
|
|
v-model="showCalendar"
|
|
@confirm="onConfirm"
|
|
/>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CalendarField',
|
|
props: {
|
|
value: {
|
|
type: [String, Number, Object],
|
|
required: false
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
showCalendar: false
|
|
}
|
|
},
|
|
computed: {
|
|
// 透传给下级组件的事件，需要排除本组件使用的change事件
|
|
childListeners () {
|
|
// const vm = this
|
|
const result = Object.assign({},
|
|
this.$listeners
|
|
)
|
|
delete result.change
|
|
return result
|
|
}
|
|
},
|
|
methods: {
|
|
onConfirm (date) {
|
|
console.log('-date-----------', date)
|
|
const value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
|
|
this.$emit('change', value)
|
|
this.showCalendar = false
|
|
},
|
|
clickField () {
|
|
if (this.readonly) {
|
|
return
|
|
}
|
|
this.showCalendar = true
|
|
}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
.not-field-readonly {
|
|
/deep/ .van-field__control{
|
|
color: #1D2129 !important;
|
|
}
|
|
}
|
|
|
|
.field-readonly {
|
|
/deep/ .van-field__control{
|
|
color: #969799 !important;
|
|
}
|
|
}
|
|
</style>
|