<template>
    <div>
       <button @click.prevent="coverHandler" class="btn-btn" type="button"  :disabled="disFlag"  :class="{disablecss:disFlag==true}"
       :style="{width:limitw,height: limith, backgroundColor:btnbg }" >
         <i v-if="showicon" :class="icon" ></i>
       {{btnValue}}
       </button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
            }
        },
        methods:{
            coverHandler(){
                this.$emit('click')
            }
        },
        props:{
            icon:{
                type:String,
                default:"el-icon-loading"
            },
            showicon:{
                type:Boolean,
                default:false,
            },
            disFlag:{
                type:Boolean,
                default:false,
            },
            btnValue:{
                type:String,
                default:"下一步"
            },
            limitw:{
                type:String,
                default:"320px"
            },
            limith:{
                type:String,
                default:"50px"
            },
            btnbg:{
                type:String,
                default:"#007AFF"
            }
        }
    }
</script>
<style lang="less" scoped>
.btn-btn{
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
}
.btn-btn:focus{
    border: none;
}
.disablecss{
    opacity: 0.6 !important;
    background: #007aff !important;
}
</style>

<login-input @click="next()"  :disFlag="backbtnFalg" class="next-btn"></login-input>