```vue
<template>
    <div class="article">
        <YYCheckboxGroup 
            v-model="checkbox" @on-change="handleChange" style="margin-bottom: 20px">
            <YYCheckbox label="1" disabled>
                <span>人才</span>
            </YYCheckbox>
            <YYCheckbox label="2">
                <span>门户</span>
            </YYCheckbox>
            <YYCheckbox label="3">
                <span>友空间</span>
            </YYCheckbox>
        </YYCheckboxGroup>
        <YYCheckboxGroup v-model="checkbox" :vertical="true" @on-change="handleChange">
            <YYCheckbox label="1">
                <span>人才</span>
            </YYCheckbox>
            <YYCheckbox label="2">
                <span>门户</span>
            </YYCheckbox>
            <YYCheckbox label="3">
                <span>友空间</span>
            </YYCheckbox>
        </YYCheckboxGroup>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checkbox: ['1']
            }
        },
        methods: {
            handleChange(value) {
                console.log(value)
            }
        }
    } 
</script>

```