大家好今天的內容是`基於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 }]">
        <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

```
<style lang="less" scoped="">
@import url('http://blog.itpub.net/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

```
<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 : ""
    }">
        <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

```
<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">上海</v-checkbox>
            </div>
        </div>

<div class="box">
            <p>indeterminate 狀態</p>
            <div class="son radio-group" style="display: block">
                <v-checkbox :indeterminate="indeterminate" v-model="checkAll">全選</v-checkbox>
                <div style="margin: 15px 0;"></div>
                <v-checkbox-group v-model="checked4" class="radio-group">
                    <v-checkbox v-for="city in data" :key="city" :label="city">{{ 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" :min="min" :max="max" class="radio-group">
                    <v-checkbox v-for="city in data1" :key="city" :label="city">{{ city }}</v-checkbox>
                </v-checkbox-group>
            </div>
        </div>
        
        <div class="box">
            <p>按鈕樣式</p>
            <div class="son radio-group">
                <v-checkbox-group v-model="checked6" class="radio-group">
                    <v-checkbox-button label="上海">上海</v-checkbox-button>
                    <v-checkbox-button label="北京">北京</v-checkbox-button>
                    <v-checkbox-button label="廣州">廣州</v-checkbox-button>
                    <v-checkbox-button label="深圳">深圳</v-checkbox-button>
                    <v-checkbox-button label="耶路撒冷">耶路撒冷</v-checkbox-button>
                </v-checkbox-group>
            </div>
            
            <div class="son radio-group">
                <v-checkbox-group v-model="checked8" size="medium" class="radio-group">
                    <v-checkbox-button label="上海">上海</v-checkbox-button>
                    <v-checkbox-button label="北京">北京</v-checkbox-button>
                    <v-checkbox-button label="廣州">廣州</v-checkbox-button>
                    <v-checkbox-button label="深圳">深圳</v-checkbox-button>
                    <v-checkbox-button label="耶路撒冷">耶路撒冷</v-checkbox-button>
                </v-checkbox-group>
            </div>

web技術支援| 基於vue3實現自己的元件庫第三章：Checkbox元件

相關文章