基本使用

<template>
    <div>
        <yb-quarter-picker
            v-model="quarter"
            placeholder="请选择"
            :defaultValue="defaultValue"
            :pickerOptions="pickerOptions"
            valueFormat="yyyyq"
            format="yyyy年q季度"
        />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                quarter: '', // 需与 valueFormat 格式一致
                defaultValue: '20223', // 2022第3季度，选择器打开时默认面板时间，需与 valueFormat 格式一致
                pickerOptions: {
                    disabledDate: (time) => {
                        // 这个用于年份选择时的禁用判断
                        if (time instanceof Date) {
                            return time.getTime() > Date.now();
                        }
                        // 这个用于季度的禁用判断 { maxDate, minDate }
                        return time.minDate.getTime() > Date.now();
                    },
                    onPick: ({ maxDate, minDate }) => {
                        console.log(maxDate, minDate);
                    },
                },
            };
        },
    };
</script>

显示 复制 复制

表单中使用

<template>
    <div>
        <yb-form
            ref="form"
            :formItems="formItems"
            :model="formModel"
            label-width="100px"
            @submit.native.prevent="onSubmit"
        >
            <template v-slot:project="formItem">
                <el-input
                    v-model="formModel[formItem.prop]"
                    clearable
                ></el-input>
            </template>
            <template v-slot:quarter="formItem">
                <yb-quarter-picker
                    v-model="formModel[formItem.prop]"
                    placeholder="请选择"
                />
            </template>
            <template v-slot:buttons="formItem">
                <el-button type="primary" native-type="submit"
                    >立即创建</el-button
                >
                <el-button>取消</el-button>
            </template>
        </yb-form>
    </div>
</template>
<script>
    export default {
        data() {
            const formItems = [
                {
                    label: '项目',
                    prop: 'project',
                    rules: [
                        {
                            required: true,
                            message: '请填写项目名称',
                            trigger: 'blur',
                        },
                    ],
                },
                {
                    label: '回款季度',
                    prop: 'quarter',
                    defaultValue: '2022-1',
                    rules: [
                        {
                            required: true,
                            message: '请选择回款季度',
                            trigger: 'blur',
                        },
                    ],
                },
                {
                    label: '',
                    prop: 'buttons',
                },
            ];
            const formModel = formItems.reduce((tol, item) => {
                return {
                    ...tol,
                    [item.prop]:
                        typeof item.defaultValue !== 'undefined'
                            ? item.defaultValue
                            : null,
                };
            }, {});
            return {
                labelWidth: 100,
                formItems,
                formModel,
            };
        },
        methods: {
            onSubmit() {
                this.$refs['form']
                    .getForm()
                    .validate()
                    .then(() => {
                        console.log('验证成功', this.formModel);
                    })
                    .catch((err, errFields) => {
                        console.log('验证失败', err, errFields);
                    });
            },
        },
    };
</script>

显示 复制 复制

YbQuarterPicker Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值，需与 valueFormat 格式一致，Date 会自动转成季度	string/Date	--	--
readonly	完全只读	boolean	--	false
disabled	禁用	boolean	--	false
editable	文本框可输入	boolean	--	true
clearable	是否显示清除按钮	boolean	--	true
size	输入框尺寸	string	large/small/mini	--
placeholder	占位内容	string	--	--
format	显示在输入框中的格式	string	详见YbQuarterPicker format	yyyy 年 q 季度
align	对齐方式	string	left/center/right	left
popperClass	下拉框的类名	string	--	--
pickerOptions	选项配置	object	详见YbQuarterPicker pickerOptions	{}
defaultValue	选择器打开时默认面板时间，需与 valueFormat 格式一致	string	--	--
valueFormat	绑定值的格式	string	详见YbQuarterPicker format	yyyyq
name	原生属性	string	--	--
prefixIcon	自定义头部图标的类名	string	--	el-icon-date
clearIcon	自定义清空图标的类名	string	--	el-icon-circle-close
validate-event	输入时是否触发表单的校验	boolean	--	true
append-to-body	DetePicker 自身是否插入至 body 元素上	boolean	--	true

YbQuarterPicker format

以 UTC 2017 年 4 月 2 日 03:04:05 为例

格式	含义	举例
yyyy	年	2017
q	季度	2

YbQuarterPicker pickerOptions

参数	说明	类型	可选值	默认值
disabledDate	设置禁用状态，参数为当前日期或者{ maxDate, minDate }，要求返回 Boolean	Function	--	--
cellClassName	设置的 className	Function({ maxDate, minDate })	--	--
onPick	选中季度后会执行的回调	Function({ maxDate, minDate })	--	--

YbQuarterPicker Events

事件名称	说明	回调参数
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致，可受 value-format 控制
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

YbQuarterPicker Methods

方法名	说明	参数
focus	使 input 获取焦点