前端工作小结28-按钮封装

<template>
<div>
<div class="box" :style="{'backgroundColor':bgcolor,'margin':margin}">
<div class="btnbox">
<p v-for="count in Number(this.count)" :class="showbtn?'morebtn':'btn'" @click="confirm(count)"
:style="{'backgroundColor':'#'+bgobj[count-1],'width':Wobj[count-1]+'px',
'height':Harr[count-1]+'px','line-height':Harr[count-1]+'px','color':'#'+fontcolor[count-1]}">{{textarr[count-1]}}</p >
</div>
</div>
</div>
</template>
<script>
export default {
name:"gogift",
props:["textarr","bgcolor","margin","margin","count","bgarr","widarr","Harr","fontcolor"],
data(){
return{
showbtn:"",
le:"#399",
bgobj:{},
Wobj:{}
}
},
methods:{
confirm(count){
this.$emit("combtn",count)
}
},
created() {
for(var key in this.bgarr){
if(this.bgarr[key]==""){
this.bgarr[key]="585858"
}else{
this.bgobj[key]=this.bgarr[key]
}
}
for(var key in this.widarr){
if(this.widarr[key]==""){
this.Wobj[key]="90"
}else{
this.Wobj[key]=this.widarr[key]
}
}
if(this.count){
this.showbtn=true
}else{
this.showbtn=false
}
}
}
</script>
<style scoped>
.box{
width: 89.4%;
display: flex;
margin: 5.3%;
}
.morebtn{
font-family: "PingFang SC-Regular";
border-radius: 0.22rem;
width: 1rem;
height: 0.45rem;
line-height: 0.45rem;
font-size: 0.16rem;
color: #FFFFFF;
letter-spacing: 0.0019rem;
text-align: center;
}
.btnbox{
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
</style>