动手吧，vue单独使用的复选框

单独使用的复选框可以用在两个状态之间的切换，如是否阅读协议、记住账号等场景。

效果：

1、template部分

<template>
    <label class="v-checkbox-single">
        <span class="v-checkbox_input" :class="{ disabled }">
            <span class="v-checkbox_inner" :class="{ checked, disabled }">span>
            <input
                v-model="checked"
                class="v-checkbox_origin"
                :disabled="disabled"
                @change="change"
                type="checkbox"
                name="checkbox"
            />
        span>
        <span class="v-checkbox_label" :class="{ disabled }">
            <slot>slot>
        span>
    label>
template>

2、js部分

export default {
    data() {
        return {};
    },
 
    props: {
        value: Boolean,
        disabled: Boolean,
    },
 
    computed: {
        checked: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
 
    created() {},
 
    methods: {
        change() {
            this.$emit("change", this.checked);
        },
    },
};

可以的话，点个赞嘛，

不赞的话，打你哦！

3、css部分

.v-checkbox-single {
    cursor: pointer;
    .v-checkbox_input {
        .v-checkbox_inner {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 16px;
            height: 16px;
            border: 1px solid rgb(250, 162, 29);
            border-radius: 2px;
            background-color: #fff;
            transition: all 0.1s;
            &.disabled {
                border-color: #ccc;
                background-color: #ccc !important;
                cursor: not-allowed;
            }
            &.checked {
                background-color: rgb(250, 162, 29);
                &::before {
                    position: absolute;
                    top: 3px;
                    left: 1px;
                    content: "";
                    width: 10px;
                    height: 4px;
                    border: 2px solid #fff;
                    border-top: 0;
                    border-right: 0;
                    transform: rotate(-45deg);
                }
            }
        }
        .v-checkbox_origin {
            position: absolute;
            margin: 0;
            width: 0;
            height: 0;
            opacity: 0;
            outline: none;
            z-index: -1;
        }
    }
    .v-checkbox_label {
        font-size: 14px;
        vertical-align: middle;
        user-select: none;
        &.disabled {
            cursor: not-allowed;
        }
    }
}