大家好今天的内容是`基于vue3实现自己的组件库`系列第二章,本文默认你会安装和创建vue3项目，如果不会请参考[vue官网](https://link.juejin.cn/?target=https%3A%2F%2Fv3.cn.vuejs.org%2Fguide%2Finstallation.html "https://link.juejin.cn/?target=https%3A%2F%2Fv3.cn.vuejs.org%2Fguide%2Finstallation.html")；

### Checkbox.vue Template

```
<template>
    <div :class='["v-checkbox", { border }, 
    { disabled: proxyDisabled || disabled || computedDisabled }, 
    { medium: border && (size || proxySize) === "medium" },
    { small: border && (size || proxySize) === "small" },
    { mini: border && (size || proxySize) === "mini" },
    { "v-radio-checked": computedChecked && !computedDisabled }]' 
    @click.stop='handleChecked'>
        <input type="checkbox" :checked='computedChecked' :disabled='disabled' :name='name || modelValue || proxyValue' :value='label'>
        <span :class='["v-radio-input", { checked: computedChecked }, { indeterminate }]'></span>
        <span :class='["v-radio-label", { active: computedChecked }]'>
            <slot></slot>
        </span>
    </div>
</template>
```

### Checkbox.vue Script

```
<script>
import { inject, computed } from 'vue';
import VairCheckout from '@/types/checkout';
export default {
    name: 'checkbox',
    props: VairCheckout,
    setup (props, ctx) {
        const proxyValue = inject('proxyValue');
        const proxyDisabled = inject('proxyDisabled');
        const proxySize = inject('proxySize');
        const proxyMin = inject('proxyMin');
        const proxyMax = inject('proxyMax');
        const update = inject('update');

return {
            handleChecked,
            proxyDisabled,
            computedChecked,
            computedDisabled,
            proxyValue,
            proxySize
        }
    }
}
</script>
```

### Checkbox.js

```
const VairCheckout = {
    modelValue: null, // 绑定值
    name: String, // 原生 name 属性
    label: [Number, String, Boolean], // Checkbox 的 value
    size: String, // Radio 的尺寸，仅在 border 为真时有效
    indeterminate: { // 设置 indeterminate 状态，只负责样式控制
        type: Boolean,
        default: () => {
            return false
        }
    },
    border: { // 是否显示边框
        type: Boolean,
        default: () => {
            return false
        }
    },
    disabled: { // 是否禁用
        type: Boolean,
        default: () => {
            return false
        }
    },
};

// Event
    // change (label)

export default VairCheckout;
```

### Checkbox.vue Style

```
<style lang='less' scoped>
@import url('../../assets/css/animation.css');
.v-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    margin-right: 30px;
    &:last-child {
        margin-right: 0;
    }
    input {
        display: none;
    }
    .v-radio-input {
        border: 1px solid#dcdfe6;
        width: 14px;
        height: 14px;
        position: relative;
        box-sizing: border-box;
        border-radius: 2px;
        transition: .3s;
        &:after {
            box-sizing: content-box;
            content: "";
            border: 1px solid #fff;
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 4px;
            position: absolute;
            top: 1px;
            transform: rotate(45deg) scaleY(0);
            width: 3px;
            transition: transform .15s ease-in .05s;
            transform-origin: center;
        }
    }
    .indeterminate {
        background-color: #409eff;
        border-color: #409eff;
        position: relative;
        &:after {
            content: "";
            position: absolute;
            display: block;
            background-color: #fff;
            height: 2px;
            transform: scale(.5);
            left: 0;
            right: 0;
            width: 10px;
            transition: width 0s;
            top: 4px;
        }
    }
    .v-radio-label {
        color: #606266;
        font-weight: 500;
        margin-left: 10px;
        font-size: 14px;
        transition: .3s;
        white-space: nowrap;
        user-select: none;
    }
    .active {
        color: #409eff;
    }
    .checked {
        background-color: #409eff;
        border-color: #409eff;
        &:after {
            transform: rotate(45deg) scaleY(1);
        }
    }
    &:hover {
        border-color: #409eff;
        .v-radio-label {
            color: #409eff;
        }
        .v-radio-input {
            border-color: #409eff;
        }
    }
}
.border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 12px 14px;
}
.medium {
    padding: 10px 10px;
}
.small {
    padding: 8px 8px;
}
.mini {
    padding: 6px 6px;
}
.v-radio-checked {
    border-color: #409eff;
}
.disabled {
    border-color: #dcdfe6;
    .v-radio-input {
        background-color: #F5F7FA;
        border: 1px solid#dcdfe6;
    }
    .v-radio-label {
        color: #c0c4cc;
    }
    .active {
        color: #c0c4cc;
    }
    .checked {
        background-color: #f2f6fc;
        border-color: #dcdfe6;
        &:after {
            transform: rotate(45deg) scaleY(1);
            border-color: #c0c4cc;
        }
    }
    &:hover {
        border-color: #dcdfe6;
        .v-radio-label {
            color: #c0c4cc;
        }
        .v-radio-input {
            border-color: #c0c4cc;
        }
    }
    cursor: not-allowed;
}
</style>
```

### Checkbox-group.vue Template

```
<template>
    <div class="v-radio-group">
        <slot></slot>
    </div>
</template>
```

### Checkbox-group.vue Script

```
<script>
import { provide, ref, watchEffect } from 'vue';
export default {
    name: 'checkbox-group',
    props: {
        modelValue: Array, // 绑定值
        size: String, // 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效
        min: Number, // 可被勾选的 checkbox 的最小数量
        max: Number, // 可被勾选的 checkbox 的最大数量
        textColor: { // 按钮形式的 Radio 激活时的文本颜色
            type: String,
            default: () => {
                return '#FFFFFF';
            }
        },
        fill: { // 按钮形式的 Radio 激活时的填充色
            type: String,
            default: () => {
                return '#409EFF';
            }
        },
        disabled: { // 是否禁用
            type: Boolean,
            default: () => {
                return false
            }
        },
    },
    setup (props, ctx) {
        const proxyValue = ref(props.modelValue);
        const proxyDisabled = ref(props.disabled);
        const proxyFill = ref(props.fill);
        const proxyTextColor = ref(props.textColor);
        const proxySize = ref(props.size);
        const proxyMin = ref(props.min);
        const proxyMax = ref(props.max);

watchEffect(() => {
            if (!Array.isArray(props.modelValue)) {
                throw new TypeError(`v-model wants to receive an array, but received a ${typeof props.modelValue}`);
            }
            proxySize.value = props.size;
            proxyTextColor.value = props.textColor;
            proxyFill.value = props.fill;
            proxyMin.value = props.min;
            proxyMax.value = props.max;
            proxyDisabled.value = props.disabled;
            proxyValue.value = props.modelValue;
        });

provide('proxyValue', proxyValue);
        provide('proxyFill', proxyFill);
        provide('proxyDisabled', proxyDisabled);
        provide('proxyTextColor', proxyTextColor);
        provide('proxySize', proxySize);
        provide('proxyMax', proxyMax);
        provide('proxyMin', proxyMin);
        provide('update', update);
        provide('border', true);
    }
}
</script>
```

### Checkbox-group.vue Style

```
<style lang='less' scoped>
.v-radio-group {
    display: flex;
}
</style>
```

### Checkbox-button.vue Template

```
<template>
    <div 
    :class='["v-radio-button", 
    { disabled: proxyDisabled || disabled || computedDisabled }, 
    { medium: proxySize === "medium" },
    { small: proxySize === "small" },
    { mini: proxySize === "mini" },
    { disabledChecked: computedChecked && (proxyDisabled || disabled || computedDisabled) }, 
    { "v-radio-button-checked": computedChecked && !computedDisabled}, { border }]' 
    :style='{ 
        backgroundColor: (computedChecked && !proxyDisabled && !disabled && !computedDisabled)? proxyFill : "", 
        color: (computedChecked && !proxyDisabled && !disabled && !computedDisabled)? proxyTextColor : ""
    }'
    @click.stop='handleChecked'>
        <input type="checkbox" :checked='computedChecked' :disabled='disabled' :name='name || modelValue || proxyValue' :value='label'>
        <span
        :style='{ color: (computedChecked && !proxyDisabled && !disabled && !computedDisabled)? proxyTextColor : "" }'
        ><slot></slot></span>
    </div>
</template>
```

### Checkbox-button.vue Script

```
<script>
import { computed, inject } from 'vue';
export default {
    name: 'checkbox-button',
    props: {
        name: String, // 原生 name 属性
        label: [Number, String, Boolean], // Radio 的 value
        disabled: { // 是否禁用
            type: Boolean,
            default: () => {
                return false
            }
        },
    },
    setup (props, ctx) {
        const proxyValue = inject('proxyValue');
        const proxyDisabled = inject('proxyDisabled');
        const proxySize = inject('proxySize');
        const proxyFill = inject('proxyFill');
        const proxyTextColor = inject('proxyTextColor');
        const proxyMin = inject('proxyMin');
        const proxyMax = inject('proxyMax');
        const update = inject('update');
        const border = inject('border');

const computedChecked = computed(() => {
            return proxyValue.value.find(item => item === props.label);
        });

return {
            handleChecked,
            proxyValue,
            computedChecked,
            proxyDisabled,
            proxySize,
            border,
            proxyFill,
            proxyTextColor,
            computedDisabled
        }
    }
}
</script>
```

### Checkbox-button.vue Style

```
<style lang='less' scoped>
.v-radio-button {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    transition: .3s;
    input {
        display: none;
    }
    span {
        color: #606266;
        font-weight: 500;
        font-size: 14px;
        white-space: nowrap;
        transition: .3s;
        user-select: none;
    }
    &:hover {
        span {
            color: #409eff;
        }
    }
}
.v-radio-button-checked {
    background-color: #409eff;
    span {
        color: #fff;
    }
    &:hover {
        span {
            color: #fff;
        }
    }
}
.medium {
    padding: 10px 16px;
}
.small {
    padding: 8px 14px;
}
.mini {
    padding: 6px 12px;
}
.disabled {
    border-color: #dcdfe6;
    background-color: #fff;
    cursor: not-allowed;
    span {
        color: #c0c4cc;
    }
    &:hover {
        span {
            color: #c0c4cc;
        }
    }
}
.disabledChecked {
    background-color: #f2f6fc;
    span {
        color: #c0c4cc;
    }
    &:hover {
        span {
            color: #c0c4cc;
        }
    }
}
.border {
    border-radius: 0;
    border-right: none;
    &:first-child {
        border-radius: 4px 0 0 4px;
    }
    &:last-child {
        border-right: 1px solid #dcdfe6;
        border-radius: 0 4px 4px 0;
    }
}
</style>
```

### index.js 出口文件中引入组件

```
// Checkbox 单选框
import Checkbox from './components/Checkbox/Checkbox.vue';
import CheckboxGroup from './components/Checkbox/components/Checkbox-group.vue';
import CheckboxButton from './components/Checkbox/components/Checkbox-button.vue';

export default Vair;
复制代码
```

### 使用组件

-   `在main.js中引入`

```
import { createApp } from 'vue'; 
import App from './App.vue'; 
import Vair from './libs/vair/index.js'; 
const app = createApp(App); 
app.use(Vair).mount('#app');
```

### App.vue中调用

```
<template>
    <div class='checkbox'>
        <div class='box'>
            <p>基础用法</p>
            <div class='son'>
                <v-checkbox v-model="checked" @change='change'>上海</v-checkbox>
            </div>
        </div>

<div class='box'>
            <p>indeterminate 状态</p>
            <div class='son radio-group' style='display: block'>
                <v-checkbox @change='handleCheckAllChange' :indeterminate='indeterminate' v-model="checkAll">全选</v-checkbox>
                <div style="margin: 15px 0;"></div>
                <v-checkbox-group v-model="checked4" @change='handleCheckedCitiesChange' class='radio-group'>
                    <v-checkbox v-for='city in data' :key='city' :label='city' @change='change'>{{ city }}</v-checkbox>
                </v-checkbox-group>
            </div>
        </div>

<div class='box'>
            <p>可选项目数量的限制</p>
            <div class='son radio-group' style='display: block'>
                <v-checkbox-group v-model="checked5" @change='change' :min='min' :max='max' class='radio-group'>
                    <v-checkbox v-for='city in data1' :key='city' :label='city' @change='change'>{{ city }}</v-checkbox>
                </v-checkbox-group>
            </div>
        </div>
        
        <div class='box'>
            <p>按钮样式</p>
            <div class='son radio-group'>
                <v-checkbox-group v-model="checked6" @change='change' class='radio-group'>
                    <v-checkbox-button @change='change' label='上海'>上海</v-checkbox-button>
                    <v-checkbox-button @change='change' label='北京'>北京</v-checkbox-button>
                    <v-checkbox-button @change='change' label='广州'>广州</v-checkbox-button>
                    <v-checkbox-button @change='change' label='深圳'>深圳</v-checkbox-button>
                    <v-checkbox-button @change='change' label='耶路撒冷'>耶路撒冷</v-checkbox-button>
                </v-checkbox-group>
            </div>
            
            <div class='son radio-group'>
                <v-checkbox-group v-model="checked8" @change='change' size='medium' class='radio-group'>
                    <v-checkbox-button @change='change' label='上海'>上海</v-checkbox-button>
                    <v-checkbox-button @change='change' label='北京'>北京</v-checkbox-button>
                    <v-checkbox-button @change='change' label='广州'>广州</v-checkbox-button>
                    <v-checkbox-button @change='change' label='深圳'>深圳</v-checkbox-button>
                    <v-checkbox-button @change='change' label='耶路撒冷'>耶路撒冷</v-checkbox-button>
                </v-checkbox-group>
            </div>

const handleCheckAllChange = (val) => {
            checked4.value = val? data.value : [];
            indeterminate.value = false;
        };
        
        const handleCheckedCitiesChange = (value) => {
            let checkedCount = value.length;
            checkAll.value = checkedCount === data.value.length;
            indeterminate.value = checkedCount > 0 && checkedCount < data.value.length;
        };

return {
            checked,
            checked1,
            checked2,
            checked3,
            checked4,
            checkAll,
            data,
            data1,
            checked5,
            checked6,
            checked7,
            checked8,
            checked9,
            checked10,
            indeterminate,
            handleCheckAllChange,
            handleCheckedCitiesChange,
            change,
            min,
            max
        }
    }
}
</script>

ITPub博客

web技术支持| 基于vue3实现自己的组件库第三章：Checkbox组件

最新文章