可以将两个表单控件用 separator 分隔的盒子

基本使用

至

至

<template>
    <div>
        <yb-range-wrapper>
            <el-input-number slot="start" v-model="start1"></el-input-number>
            <el-input-number slot="end" v-model="end1"></el-input-number>
        </yb-range-wrapper>
        <yb-range-wrapper style="margin-top:10px;">
            <el-input slot="start" v-model="start2"></el-input>
            <el-input slot="end" v-model="end2"></el-input>
        </yb-range-wrapper>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                start1: 1,
                end1: 50,
                start2: 'A09',
                end2: 'Z90',
            };
        },
        methods: {},
    };
</script>

显示 复制 复制

分割符插槽

<template>
    <div>
        <yb-range-wrapper>
            <el-input-number slot="start" v-model="start1"></el-input-number>
            <el-input-number slot="end" v-model="end1"></el-input-number>
            <i slot="separator" class="el-icon-link" style="transform: rotate(45deg)" />
        </yb-range-wrapper>
        <yb-range-wrapper style="margin-top:10px;">
            <el-input slot="start" v-model="start2"></el-input>
            <el-input slot="end" v-model="end2"></el-input>
            <i slot="separator" class="el-icon-share" />
        </yb-range-wrapper>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                start1: 1,
                end1: 50,
                start2: 'A09',
                end2: 'Z90',
            };
        },
        methods: {},
    };
</script>

显示 复制 复制

Props

参数	说明	类型	可选值	默认值
separator	分隔符	string	-	至

Slot

name	说明
separator	分隔符区域的内容插槽
start	左边内容
end	右边内容