当前位置: 首页 > 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。 由此我们容易知道两个相同的数,进行异或运算得到的结果…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...