免费网站风格外贸企业网站设计公司

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

效果：

1、template部分

<template><label class="v-checkbox-single"><span class="v-checkbox_input" :class="{ disabled }"><span class="v-checkbox_inner" :class="{ checked, disabled }"></span><inputv-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;}}
}