当前位置: 首页 > news >正文

动手吧,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><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;}}
}

相关文章:

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

单独使用的复选框可以用在两个状态之间的切换&#xff0c;如是否阅读协议、记住账号等场景。 效果&#xff1a; 1、template部分 <template><label class"v-checkbox-single"><span class"v-checkbox_input" :class"{ disabled }&qu…...

升级iOS17后可以降级吗?iOS17退回iOS16方法教程分享

iOS 17已上线几天&#xff0c;从网上用户的反馈和媒体机构的报告来看&#xff0c;iOS17系统对旧机型来说并不友好&#xff0c;除了电池续航下降以外&#xff0c;占用大量储存空间&#xff0c;BUG也不少。 苹果于 9 月 7 日发布了 iOS 16.6.1 版本&#xff0c;如果升级iOS17后发…...

基于STM32和LORA组网的养老院智能控制系统设计(第十八届研电赛)

一、整体功能 数据采集从机1采集烟雾浓度&#xff0c;PM2.5浓度&#xff0c;甲醛浓度&#xff1b;从机2采集温湿度&#xff0c;光照强度&#xff0c;噪声强度&#xff0c;老人体感温度&#xff1b;从机3收集厨房饮用水的TDS值。3个数据采集从机将采集到的数据显示在本地OLED屏…...

关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案

如果没有特殊的处理&#xff0c;Qt的UI窗口在不同的分辨率和缩放率下&#xff0c;其显示效果可能会出现问题&#xff0c;常见的有&#xff1a; 子控件堆叠&#xff0c;无法显示完整 窗口尺寸变大&#xff0c;超出屏幕的显示范围 控件变形&#xff0c;长宽比不合理 界面模糊 …...

第1篇 目标检测概述 —(1)目标检测基础知识

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。目标检测是计算机视觉领域中的一项任务&#xff0c;旨在自动识别和定位图像或视频中的特定目标&#xff0c;目标可以是人、车辆、动物、物体等。目标检测的目标是从输入图像中确定目标的位置&#xff0c;并使用边界框将其标…...

Discuz论坛网站标题栏Powered by Discuz!版权信息如何去除或是修改?

当我们搭建好DZ论坛网站后&#xff0c;为了美化网站&#xff0c;想把标题栏的Powered by Discuz&#xff01;去除或是修改&#xff0c;应该如何操作呢&#xff1f;今天飞飞和你分享&#xff0c;在操作前务必把网站源码和数据库都备份到本地或是网盘。 Discuz的版权信息存在两处…...

springboot整合aop,实现日志操作

前言&#xff1a; 整合之前&#xff0c;我们要明白aop是什么&#xff0c;为什么要用aop&#xff0c;aop能帮我们做什么。 答&#xff1a;AOP是面向切面编程&#xff08;Aspect-Oriented Programming&#xff09;的简称&#xff0c;它是一种编程思想&#xff0c;旨在在面向对象…...

openjdk和oracle jdk的区别

OpenJDK 和 Oracle JDK 都是 Java Development Kit (JDK) 的不同实现&#xff0c;用于开发和运行 Java 应用程序。它们有一些区别&#xff0c;但也有很多相似之处。以下是它们之间的主要区别&#xff1a; 开源性质&#xff1a; OpenJDK 是开源的&#xff0c;由一个社区维护和开…...

深度学习-Python调用ONNX模型

目录 ONNX模型使用流程 获取ONNX模型方法 使用ONNX模型 手动编写ONNX模型 Python调用ONNX模型 常见错误 错误raise ValueError...&#xff1a; 错误&#xff1a;Load model model.onnx failed 错误&#xff1a;CUDAExecutionProvider is not in available provider 错…...

[2023.09.24]: 今天差点又交白卷

今天周日&#xff0c;搞定了家里装修的一件事情&#xff0c;周末的事特别多&#xff0c;总算在10点的时候&#xff0c;解决了昨天那个输入焦点设置失败的问题。 在探索Rust编写基于web_sys的WebAssembly编辑器&#xff1a;挑战输入光标定位的实践中&#xff0c;我们总结了设置光…...

css,环形

思路&#xff1a; 1.先利用conic-gradient属性画一个圆&#xff0c;然后再叠加 效果图 <template><div class"ring"><div class"content"><slot></slot></div></div> </template> <script> import …...

php食堂点餐系统hsg5815ABA2程序-计算机毕业设计源码+数据库+lw文档+系统+部署

php食堂点餐系统hsg5815ABA2程序-(毕业设计毕设项目源代码课程设计程序设计指导xz2023) php食堂点餐系统hsg5815ABA2程序-计算机毕业设计源码数据库lw文档系统部署...

Vite打包时使用plugin解决浏览器兼容问题

一、安装Vite插件 在终端输入如下命令&#xff1a; npm add -D vitejs/plugin-legacy 二、配置config文件 在项目目录下创建vite.config.js文件夹&#xff0c;配置如下代码&#xff1a; import { defineConfig } from "vite"; import legacy from "vitejs/pl…...

java Excel 自用开发模板

下载导出 import com.hpay.admin.api.vo.Message; import com.hpay.admin.dubbo.IConfigDubboService; import com.hpay.admin.dubbo.IFileExportLogDubboService; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang.StringUtils; import org.apache.poi.hss…...

34.CSS魔线图标的悬停效果

效果 源码 index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Icon Fill Hover Effects</title> <link rel="stylesheet" h…...

Django — 会话

目录 一、Cookie1、介绍2、作用3、工作原理4、结构5、用途6、设置7、获取 二、Session1、介绍2、作用3、工作原理3、类型4、用途5、设置6、获取7、清空信息 三、Cookie 和 Session 的区别1、存储位置2、安全性3、数据大小4、跨页面共享5、生命周期6、实现机制7、适用场景 四、P…...

SpringBoot集成easypoi实现execl导出

<!--easypoi依赖&#xff0c;excel导入导出--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-spring-boot-starter</artifactId><version>4.4.0</version></dependency>通过Exce注解设置标头名字和单…...

第9章 【MySQL】InnoDB的表空间

表空间 是一个抽象的概念&#xff0c;对于系统表空间来说&#xff0c;对应着文件系统中一个或多个实际文件&#xff1b;对于每个独立表空间来说&#xff0c;对应着文件系统中一个名为 表名.ibd 的实际文件。大家可以把表空间想象成被切分为许许多多个 页 的池子&#xff0c;当我…...

工作、生活常用免费api接口大全

手机号码归属地&#xff1a;提供三大运营商的手机号码归属地查询。全国快递物流查询&#xff1a;1.提供包括申通、顺丰、圆通、韵达、中通、汇通等600快递公司在内的快递物流单号查询。2.与官网实时同步更新。3.自动识别快递公司。IP归属地-IPv4区县级&#xff1a;根据IP地址查…...

寻找单身狗

在一个数组中仅出现一次&#xff0c;其他数均出现两次&#xff0c;这个出现一次的数就被称为“单身狗“。 一.一个单身狗 我们知道异或运算操作符 ^ &#xff0c;它的特点是对应二进制位相同为 0&#xff0c;相异为 1。 由此我们容易知道两个相同的数,进行异或运算得到的结果…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...