在 YbRangeWrapper 的基础上将两个表单控件的值的数组以 v-model 形式输出

基本使用

value：[]

至

<template>
    <div>
        <div style="margin-bottom:10px">value：{{dateRange}}</div>
        <yb-range v-model="dateRange">
            <template v-slot:start="{model}">
                <el-input-number v-model="model.start"></el-input-number>
            </template>
            <template v-slot:end="{model}">
                <el-input-number v-model="model.end"></el-input-number>
            </template>
        </yb-range>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateRange: [],
            };
        },
        methods: {},
    };
</script>

显示 复制 复制

分隔符插槽

value：[]

<template>
    <div>
        <div style="margin-bottom:10px">value：{{dateRange}}</div>
        <yb-range v-model="dateRange">
            <template v-slot:start="{model}">
                <el-input-number v-model="model.start"></el-input-number>
            </template>
            <template v-slot:end="{model}">
                <el-input-number v-model="model.end"></el-input-number>
            </template>
            <template v-slot:separator>
                <i class="el-icon-link" style="transform: rotate(45deg)" />
            </template>
        </yb-range>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dateRange: [],
            };
        },
        methods: {},
    };
</script>

显示 复制 复制

Props

参数	说明	类型	可选值	默认值
value/v-model	绑定值	array	-	-
separator	分隔符	string	-	至

Scoped Slot

name	说明	参数
separator	分隔符区域的内容插槽	{model} ， model.start 对应 value 数组的第一个值，model.start 对应 value 数组的第二个值
start	左边内容	{model} ， model.start 对应 value 数组的第一个值，model.start 对应 value 数组的第二个值
end	右边内容	{model} ， model.start 对应 value 数组的第一个值，model.start 对应 value 数组的第二个值

Events

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