<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <e-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></e-input-number>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>禁用状态</span>
                    </div>
                    <div>
                        <e-input-number v-model="num1" :disabled="true"></e-input-number>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>步数</span>
                    </div>
                    <div>
                        <e-input-number v-model="num2" :step="2"></e-input-number>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>严格步数</span>
                    </div>
                    <div>
                        <e-input-number v-model="num3" :step="2" step-strictly></e-input-number>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>精度</span>
                    </div>
                    <div>
                        <e-input-number v-model="num4" :precision="2" :step="0.1" :max="10"></e-input-number>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>尺寸</span>
                    </div>
                    <div>
                        <div class="block">
                            <e-input-number v-model="num5"></e-input-number>
                        </div>
                        <div class="block">
                            <e-input-number size="medium" v-model="num6"></e-input-number>
                        </div>
                        <div class="block">
                            <e-input-number size="small" v-model="num7"></e-input-number>
                        </div>
                        <div class="block">
                            <e-input-number size="mini" v-model="num8"></e-input-number>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>按钮位置</span>
                    </div>
                    <div>
                        <e-input-number v-model="num9" controls-position="right" @change="handleChange" :min="1" :max="10"></e-input-number>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            num: 1,
            num1:1,
            num2:5,
            num3:2,
            num4:1,
            num5: 1,
            num6: 1,
            num7: 1,
            num8: 1,
            num9: 1,
        }
    },
    mounted() {
    },
    methods: {
        handleChange(value) {
        console.log(value);
      }
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
