119 lines
3.1 KiB
JavaScript
119 lines
3.1 KiB
JavaScript
/**
|
|
* 年月选择
|
|
* @author john
|
|
* @date 2020/10/20
|
|
*/
|
|
import MfText from '../text/Text'
|
|
import classnames from 'classnames'
|
|
import BaseMixin from '../_utils/BaseMixin'
|
|
import dayjs from 'dayjs'
|
|
import utc from 'dayjs/plugin/utc'
|
|
import timezone from 'dayjs/plugin/timezone'
|
|
dayjs.extend(utc)
|
|
dayjs.extend(timezone)
|
|
const tz = dayjs.tz.guess()
|
|
|
|
export default {
|
|
name: 'mf-month-range-picker',
|
|
mixins: [BaseMixin],
|
|
emits: ['update:modelValue', 'change', 'blur', 'popup-visible-change'],
|
|
props: {
|
|
modelValue: [String, Array],
|
|
placeholder: Array,
|
|
disabled: Boolean,
|
|
clearable: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 尺寸
|
|
size: {
|
|
type: String,
|
|
default: 'default'
|
|
},
|
|
prefixCls: {
|
|
type: String,
|
|
default: 'mf-month-range-picker'
|
|
},
|
|
// 下拉框类名
|
|
popperClass: String,
|
|
// 默认弹出框是打开或者关闭
|
|
defaultPopupVisible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 禁用日期
|
|
disabledDate: Function
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
getValue() {
|
|
let { modelValue } = this
|
|
if (typeof modelValue == 'string') {
|
|
return modelValue.split(',')
|
|
} else {
|
|
return modelValue
|
|
}
|
|
}
|
|
},
|
|
render() {
|
|
let {
|
|
prefixCls,
|
|
size,
|
|
placeholder,
|
|
popperClass,
|
|
clearable,
|
|
readonly,
|
|
disabled,
|
|
defaultPopupVisible,
|
|
disabledDate
|
|
} = this
|
|
const textCls = classnames(`${prefixCls}-readonly`, {
|
|
[`${prefixCls}-readonly-${size}`]: size
|
|
})
|
|
|
|
const wrapCls = classnames(prefixCls)
|
|
|
|
if (readonly) {
|
|
return (
|
|
<MfText
|
|
value={this.valueVal}
|
|
class={textCls}
|
|
/>
|
|
)
|
|
} else {
|
|
let datePickerProps = {
|
|
modelValue: this.getValue(),
|
|
mode: 'month',
|
|
placeholder,
|
|
size,
|
|
popperClass,
|
|
allowClear: clearable,
|
|
disabled,
|
|
defaultPopupVisible,
|
|
'onUpdate:modelValue': (v) => {
|
|
this.$emit('update:modelValue', v)
|
|
},
|
|
onChange: (v) => {
|
|
this.$emit('change', v)
|
|
},
|
|
onBlur: (e) => {
|
|
this.$emit('blur', e)
|
|
},
|
|
onPopupVisibleChange: (val) => {
|
|
this.$emit('popup-visible-change', val)
|
|
}
|
|
}
|
|
if (disabledDate) datePickerProps.disabledDate = disabledDate
|
|
return (
|
|
<a-range-picker
|
|
ref="mfMonthPicker"
|
|
class={wrapCls}
|
|
{...datePickerProps}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
}
|