【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式

 

我原先是用的单选,但是单选并不支持选中后,再次点击取消选中;所以我改成了多选,然后改变多选样式,让他看起来像单选 

 在所在使用的页面上修改样式即可

<uni-data-checkbox multiple selectedColor='#2979ff' selectedTextColor="#000" v-model="agree":localdata="agreedata"><label><checkbox /><view>我已阅读并同意<text class="col-g" @click="handleXI">《用户协议》</text><text class="col-g" @click="handleYX">《隐私协议》</text></view></label></uni-data-checkbox>
<style lang="scss">//修改多选框的样式为单选样式.uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner .checkbox__inner-icon {opacity: 1;background-color: #2979ff !important;}.uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon {width: 8px !important;height: 8px !important;border-radius: 10px !important;top: 3px !important;left: 3px !important;height: 8px;width: 4px;border: 0px solid #2979ff !important;}.uni-data-checklist .checklist-group .checklist-box .checkbox__inner {border-radius: 8px !important;display: flex;flex-shrink: 0;box-sizing: border-box;justify-content: center;align-items: center;position: relative;width: 16px;height: 16px;border: 1px solid #DCDFE6;border-radius: 16px;background-color: #fff !important;z-index: 1;}
</style>

2、修改checkbox的样式

 

<checkbox-group><label style="display: flex;"><checkbox value="agree" class="checkbox" /><view>我已阅读并同意<text class="col-g" @click="handleYH">《用户协议》</text>及<text class="col-g" @click="handleYS">《隐私协议》</text></view></label></checkbox-group>

 样式必须得写在app.vue中

.login_container {//自定义checkbox的样式( 元素使用的时候就是使用类名:checkbox )checkbox.checkbox .wx-checkbox-input,checkbox.checkbox .uni-checkbox-input {border-radius: 8px !important;display: flex;flex-shrink: 0;box-sizing: border-box;justify-content: center;align-items: center;position: relative;width: 16px;height: 16px;border: 1px solid #DCDFE6;border-radius: 16px;background-color: #fff !important;z-index: 1;}// 选中后的 对勾样式 checkbox.checkbox .uni-checkbox-input-checked::before,checkbox.checkbox .wx-checkbox-input-checked::before {width: 8px;height: 8px;border-radius: 10px !important;line-height: 20px;text-align: center;font-size: 18px;color: #fff;background: #2979ff;transform: translate(-70%, -50%) scale(1);-webkit-transform: translate(-70%, -50%) scale(1);position: absolute;top: 7px !important;left: 9px !important;border: 0px solid #2979ff !important;}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21940.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zabbix分布式监控快速入门

目录 1 Zabbix简介1.1 软件架构1.2 版本选择1.3 功能特性 2 安装与部署2.1 时间同步需求2.2 下载仓库官方源2.3 Zabbix-Server服务端的安装2.3.1 安装MySQL2.3.1.1 创建Zabbix数据库2.3.1.2 导入Zabbix库的数据文件 2.3.2 配置zabbix_server.conf2.3.3 开启Zabbix-Server服务2.…

Elasticsearch:如何将整个 Elasticsearch 索引导出到文件 - Python 8.x

在实际的使用中&#xff0c;我们有时希望把 Elasticsearch 的索引保存到 JSON 文件中。在之前&#xff0c;我写了一篇管如何备份 Elasticsearch 索引的文章 “Elasticsearch&#xff1a;索引备份及恢复”。在今天&#xff0c;我们使用一种 Python 的方法来做进一步的探讨。你可…

如何使用vue ui创建一个项目?

首先打开cmd 输入vue ui 等待浏览器打开一个窗口&#xff0c;按照下图操作 在"功能页面"中&#xff0c;各个插件代表以下意思&#xff1a; Babel&#xff1a;Babel是一个JavaScript编译器&#xff0c;用于将ES6代码转换为向后兼容的JavaScript版本&#xff0c;以确保…

华为推出手机系统云翻新服务:什么是云翻新?如何使用?

华为手机系统云翻新是华为推出的一项功能&#xff0c;旨在通过云服务提供系统翻新的服务。它可以帮助用户对手机的系统进行优化和更新&#xff0c;以提高手机的性能和流畅度。具体而言&#xff0c;华为手机系统云翻新功能提供了免费的云空间&#xff0c;用户可以将手机中的系统…

Matlab对TMS320F28335编程--SVPWM配置互补PWM输出

前言 F28335中断 目的&#xff1a;FOC的核心算法及SVPWM输出&#xff0c;SVPWM的载波频率10kHz&#xff0c;SVPWM的每个周期都会触发ADC中断采集相电流&#xff0c;SVPWM为芯片ePWM4、5、6通道&#xff0c;配置死区 1、配置中断SVPWM进ADC中断&#xff0c;查上表知CPU1,PIE1 …

10分钟理解React生命周期

前言 学习React&#xff0c;生命周期很重要&#xff0c;我们了解完生命周期的各个组件&#xff0c;对写高性能组件会有很大的帮助。 一、简介 React /riˈkt/ 组件的生命周期指的是组件从创建到销毁过程中所经历的一系列方法调用。这些方法可以让我们在不同的时刻执行特定的…

数据可视化(六)多个子图及seaborn使用

1.多个子图绘制 #绘制多个子图 #subplot&#xff08;*args&#xff0c;**kwargs&#xff09; 每个subplot函数只能绘制一个子图 #subplots&#xff08;nrows&#xff0c;ncols&#xff09; #fig_add_subplot(行&#xff0c;列&#xff0c;区域) #绘制子图第一种方式 plt.subp…

算法刷题Day 55 判断子序列+不同的子序列

Day 55 动态规划 392. 判断子序列 动态规划 就是用求最长公共子序列的方法&#xff0c;最后在返回时判断长度 class Solution { public:bool isSubsequence(string s, string t) {int m s.size() 1, n t.size() 1;vector<vector<int>> dp(m, vector<int…

HTTP——五、与HTTP协作的Web服务器

HTTP 一、用单台虚拟主机实现多个域名二、通信数据转发程序 &#xff1a;代理、网关、隧道1、代理2、网关3、隧道 三、保存资源的缓存1、缓存的有效期限2、客户端的缓存 一台 Web 服务器可搭建多个独立域名的 Web 网站&#xff0c;也可作为通信路径上的中转服务器提升传输效率。…

aop实现加注解,自动存入数据库功能

1、建包、创类、建数据库 2 、数据库对应实体类 PcOperateLog import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;Data AllArgsConstructor NoArgsConstructor public class PcOperateLog {private Integer id;private String name;pri…

SQL 语句中 left join 后用 on 还是 where,区别大了!

目录 情况 小结 举例 情况 前天写SQL时本想通过 A left B join on and 后面的条件来使查出的两条记录变成一条&#xff0c;奈何发现还是有两条。 后来发现 join on and 不会过滤结果记录条数&#xff0c;只会根据and后的条件是否显示 B表的记录&#xff0c;A表的记录一定会显…

网络基础1

文章目录 网络基础11. 计算机网络背景1.1 网路发展1.2 认识 "协议" 2. 网络协议初识2.1 协议分层2.2 OSI七层模型2.3 TCP/IP五层(或四层)模型协议栈与OS的关系 3. 网络传输基本流程3.1 同一个局域网两台主机通信3.2 同一个路由器的两个子网通信 4. 网络中的地址管理4…

html学习10(字符实体)

1、在html中&#xff0c;某些字符是预留的。为了正确显示相应字符&#xff0c;需要使用字符实体。 2、字符实体的格式以&开头&#xff0c;后跟字符的别称。例如&#xff1a;小写符号用&lt表示。 3、html最常用的字符实体是不间断空格&#xff08;&nbsp&#xff0…

一文辨析,性能分析top命令中进程NI和PR

分析 Linux 服务器性能&#xff0c;首先想到的命令肯定是 top, 通过它&#xff0c;我们可以看到当前服务器资源使用情况和进程运行资源占用情况。 如果你想学习自动化测试&#xff0c;我这边给你推荐一套视频&#xff0c;这个视频可以说是B站播放全网第一的自动化测试教程&…

靶形数独

题目描述 小城和小华都是热爱数学的好学生&#xff0c;最近&#xff0c;他们不约而同地迷上了数独游戏&#xff0c;好胜的他们想用数独来一比高低。但普通的数独对他们来说都过于简单了&#xff0c;于是他们向 Z 博士请教&#xff0c;Z 博士拿出了他最近发明的“靶形数独”&am…

企业数字化转型:信息化还是数字化?

面对巨大的数字经济市场&#xff0c;全球大部分企业都开始了数字化转型进程&#xff0c;国内一半以上的企业已经将数字化转型视为下一步发展重点&#xff0c;并制定了清晰的数字化转型战略规划。 但是&#xff0c;相当一部分传统行业&#xff0c;如制造、金融、能源、化工等非数…

Dockerfile面试题(CMD、ENTRYPOINT与RUN命令对比)

目录 Dockerfile面试题 CMD、ENTRYPOINT与RUN命令对比 &#xff08;一&#xff09;CMD命令 &#xff08;二&#xff09;RUN命令 &#xff08;三&#xff09;ENTRYPOINT &#xff08;四&#xff09;RUN和CMD、ENTRYPOINT支持参数形式命令 &#xff1a; Dockerfile面试题 …

【M波段2D双树(希尔伯特)小波多分量图像去噪】基于定向M波段双树(希尔伯特)小波对多分量/彩色图像进行降噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

ANC-ZKUXT2系列FPGA隔离卡网闸版DPDK虚拟kni网口

1. 环境配置及依赖工具&#xff0c;在DPDK使用方法一文中已经介绍&#xff0c;不再重复 yum groupinstall "Development Tools" -y //For RHEL/Fedoraapt install -y build-essential //For Ubuntu/Debian 管理 NUMA 的库&#xff1a;yum install -y numactl-deve…

C# 遍历数组中的对象委托方法

1&#xff0c;声明一个委托&#xff0c;理解这个可以装没有返回值和参数方法。 public delegate void StackEvent(); 2&#xff0c;声明一个类 Cs2 public class Cs2{public StackEvent tes;public Cs2(StackEvent stackEvent){tes stackEvent;}public string url { get; se…