<template>
    <div class="ht-base-input-dropdown-between-demo">

        <ht-base-select v-model="project" style="width:100px">
            <ht-base-option v-for="item in projectList" :value="item.value" :key="item.value">{{ item.label }}
            </ht-base-option>
        </ht-base-select>
        <ht-base-input style="width:100px; margin-left: -4px" placeholder="请输入"/>
        <ht-base-input style="width: 30px; margin-left: -4px" placeholder="~" disabled/>
        <ht-base-input style="width: 100px; margin-left: -4px" placeholder="请输入"/>

    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputDropdownBetweenDemo',
        data() {
            return {
                project: '1',
                projectList: [
                    {
                        value: '1',
                        label: '项目一'
                    },
                    {
                        value: '2',
                        label: '项目二'
                    }
                ]
            }
        }
    }
</script>
<style lang="less">
    .ht-base-input-dropdown-between-demo {
        /deep/ .ivu-input.ivu-input-disabled {
            text-align: center;
        }
        .ht-base-select {
            /deep/ .ivu-select-selection:hover {
                z-index: 1;
            }

            /deep/ .ivu-select-selection:focus {
                z-index: 1;
            }
        }
        .ht-base-input {
            /deep/ .ivu-input:hover {
                z-index: 1 ;
            }

            /deep/ .ivu-input:focus {
                z-index: 1 ;
            }
        }
    }

</style>

