基本使用

至

value：[]

<template>
    <div>
        <yb-range-quarter-picker v-model="quarterRange" />
        <div style="margin-top:10px">value：{{quarterRange}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                quarterRange: [],
            };
        },
    };
</script>

显示 复制 复制

范围完整值

只选一个值时，第二个值取间隔1年

至

value：[]

只选一个值时，第二个值取间隔1个季度，并且显示到框内

至

value：[]

只选一个值时，第二个值总是间隔1个季度

至

value：[]

<template>
    <div>
        <div style="margin:10px 0">只选一个值时，第二个值取间隔1年</div>
        <yb-range-quarter-picker v-model="dateRange" intactBoth />
        <div style="margin:10px 0">value：{{dateRange}}</div>
        <div style="margin:10px 0">
            只选一个值时，第二个值取间隔1个季度，并且显示到框内
        </div>
        <yb-range-quarter-picker
            v-model="dateRange2"
            intactBoth
            :intactOption="{value:1,visible:true}"
        />
        <div style="margin:10px 0">value：{{dateRange2}}</div>
        <div style="margin:10px 0">只选一个值时，第二个值总是间隔1个季度</div>
        <yb-range-quarter-picker
            v-model="dateRange3"
            intactBoth
            :intactOption="{value:1,visible:true,always:true}"
        />
        <div style="margin:10px 0">value：{{dateRange3}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateRange: [],
                dateRange2: [],
                dateRange3: [],
            };
        },
    };
</script>

显示 复制 复制

YbRangeQuarterPicker Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	array	-	[]
datePickerProps	详见YbRangeQuarterPicker datePickerProps	object	-	--
separator	分隔符	string	-	至
intactBoth	值的完整性，开启后，与 intactOption 结合保证输出的 value 是完整的两个值	boolean	-	false
intactOption	当 intactBoth 开启后，其中有一个输入框没有值时，自动获取完整的值，得到完整的范围值，详见YbRangeQuarterPicker intactOption	object	-	--

YbRangeQuarterPicker datePickerProps

参数	说明	类型	可选值	默认值
startPlaceholder	范围选择时开始季度的占位内容	string	-	选择开始季度
endPlaceholder	范围选择时结束季度的占位内容	string	-	选择结束季度
--	其他属性同yb-quarter-picker	-	-	-

YbRangeQuarterPicker intactOption

参数	说明	类型	可选值	默认值
value	当 intactBoth 开启后，增加/减去 value 个季度	number	-	4
visible	当 intactBoth 开启后，是否显示到输入框	boolean	-	false
always	当 intactBoth 开启后，范围值总是保持固定间隔	boolean	-	false

YbRangeQuarterPicker Events

事件名称	说明	回调参数
change	选定值改变时触发	value