<template>
    <div class="ht-base-input-dropdowm-number-demo">
        <ht-base-select v-model="selectValue" 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 v-model="projectContent" placeholder="项目内容" style="width: 200px;margin-left: -4px"/>
        <ht-base-input-number v-model="projectNumber" placeholder="项目数"
                              style="width: 100px;margin-left: -5px" :min="0"></ht-base-input-number>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputDropdowmNumberDemo',
        data() {
            return {
                selectValue: '1',
                projectContent: '',
                projectNumber: null,
                projectList: [
                    {
                        value: '1',
                        label: '项目一'
                    },
                    {
                        value: '2',
                        label: '项目二'
                    }
                ]
            }
        }
    }
</script>
<style lang="less">
    .ht-base-input-dropdowm-number-demo {
        .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>

