根据配置项插入复选框

//checkbox.vue
<template>
    <div class="check">
        <input type="checkbox" class="box">
        <span class="text">wiaa</span>

    </div>
</template>

<script>

    export default {
        
    }
</script>

<style scoped>
   .check{
       width:400px;
       height:40px;
       border:1px solid;
       
   }
   .box{
       width:20px;
       height: 20px;
       background: #fff;
       border: 1px solid #999;
   }
   .text{
       width:100%;
       height:100%;
       line-height:20px;
   }
</style>
//validtor
<template>
    <div class="wrap">
        company<input type="text" >
        <checkBox class="check" v-show="isCheck"/>
    </div>
</template>

<script>
    import checkBox from "./checkBox.vue"
    export default {
        components:{checkBox},
        props:["configdata"],
        data() {
            return {
                isCheck:false
            }
        },
        mounted() {
              let {invoiceFields}=this.configdata
                // console.log(invoiceFields)
                let invoiceFieldsArr=Object.keys(invoiceFields)
                console.log(invoiceFieldsArr)

                     if(invoiceFieldsArr.includes("invoicePlayer")){
                        // this.$emit("change",invoiceFields.invoicePlayer)
                        this.isCheck=true
                        console.log(22);
                        
                }
        },
    }
</script>

<style scoped>
   .wrap{
       width:600px;
       height:300px;
       border:1px solid;
       position: relative;
   }
   .check{
       position: absolute;
       left: 20px;
       bottom: 20px;
   }
</style>
//confirm.vue
<template>
    <div>
        <div class="form">
            <div class="invoice">invoice</div>
            <button class="btn" @click="change()">change</button>
        </div>
        <div class="dialog" v-show="isShow">
            <valitor :configdata="configdata"/>
        </div>
    </div>
</template>

<script>
    import valitor from './valitor.vue'
    export default {
        components:{valitor},
        data() {
            return {
                isShow:false,
               
                configdata:{
                    invoiceFields:{
                        invoicePlayer:"word",
                        invoiceType:"ele"
                    }
                    
                }
            }
        },
        methods:{
            change(){
                this.isShow=true;
             
            }
        }
    }
</script>

<style scoped>
.form{
    width: 400px;
    height: 100px;
    border: 1px solid #000;
    display: flex;
    justify-content: space-between;
}
.invoice{
   width:100px
}
.btn{
    border:none;
    height: 18px;
    background:#fff;
    flex: 1;
    
}
</style>