网站建设文章缩略图,网站建立与推广,百度网站提交收录,黄国外网站单独使用的复选框可以用在两个状态之间的切换#xff0c;如是否阅读协议、记住账号等场景。
效果#xff1a; 1、template部分
templatelabel classv-checkbox-singlespan classv-checkbox_input :class{ disabled }如是否阅读协议、记住账号等场景。
效果 1、template部分
templatelabel classv-checkbox-singlespan classv-checkbox_input :class{ disabled }span classv-checkbox_inner :class{ checked, disabled }/spaninputv-modelcheckedclassv-checkbox_origin:disableddisabledchangechangetypecheckboxnamecheckbox//spanspan classv-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;}}
}
