<template>
    <div class="ht-base-input-combination-group-demo">
        <ht-base-row>
            <ht-base-col :span="12">
                <ht-base-input v-model="inputValue1" placeholder="default size" style="width:100px"/>
                <ht-base-input v-model="phoneNumber1" placeholder="default size" style="width:200px;margin-left: -4px"/>
            </ht-base-col>
            <ht-base-col :span="12">
                <ht-base-input v-model="inputValue2" placeholder="default size" style="width:100px;margin-right: 3px"/>
                <ht-base-input v-model="phoneNumber2" placeholder="default size" style="width:200px"/>
            </ht-base-col>
        </ht-base-row>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputCombinationGroupDemo',
        data() {
            return {
                inputValue1: '0571',
                phoneNumber1: '26888888',
                inputValue2: '0571',
                phoneNumber2: '26888888',
            }
        }
    }
</script>
<style lang="less">
    .ht-base-input-combination-group-demo {
        .ht-base-input {
            /deep/.ivu-input:hover {
                z-index: 1 !important;
            }
            /deep/.ivu-input:focus {
                z-index: 1 !important;
            }
        }
    }
</style>

