<template>
    <div>
        <!--自定义复选框-->
        <el-checkbox-group v-model="checkboxVal"
                           :size="size"
                           :disabled="disabled"
                           @change="change"
                           v-on="on"
                           :style="{'width':width,'height':height}"
                           :attrs="{'style':controlCss}">
            <el-checkbox v-for="(item,index) in checkboxArr" :key="index" :label="item.value">
                {{item.label}}
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
    export default {
        name: "pl-checkbox-group",
        props:{
            "value":{type:Array,default:function () {return []}},
            "size":{type:String,default:"small"},
            "width":{type:String,default:"100%"},
            "height":{type:String,default:""},
            "controlCss":{type:String,default:""},
            "disabled":{type:Boolean,default:false},
            checkboxArr:{type:Array,default:function () {return []}},
            on:{type:Object,default: null}
        },
        data(){
            return {
                checkboxVal:[],
                checkboxObj:{}
            }
        },
        watch:{
            value(){
                this.checkboxVal = JSON.parse(JSON.stringify(this.value));
            }
        },
        created(){
            this.checkboxVal = JSON.parse(JSON.stringify(this.value));
        },
        methods:{
            change(val){
                this.$emit("input",val);
            }
        }
    }
</script>

<style scoped>

</style>
