uniapp实现单选框卡片选择器,支持微信小程序、H5等多端

采用uniapp-vue3实现的一款单选框卡片选择器,纯CSS实现样式和交互,提供丝滑的动画选中效果,支持不同主题配置,适配多端

可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=16901

  • 使用示例

请添加图片描述

  • 示例代码
<template><view><view class="light"><wo-card-radio v-model:options="state.items" v-model:defaultValue="state.default" @on-change="changeEvent"></wo-card-radio></view><view class="dark"><wo-card-radio v-model:options="state.items" v-model:defaultValue="state.default" v-model:styleObj="state.theme.dark" @on-change="changeEvent"></wo-card-radio></view></view>
</template><script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({items: [{value: 'test',label: '中国农业银行',cardLinearColor: 'linear-gradient(45deg, #89c888, #1BA035)'},{value: 'test2',label: '中国工商银行',cardLinearColor: 'linear-gradient(45deg, #ff8c75, #FF4A3B)'},{value: 'test3',label: '中国建设银行',cardLinearColor: 'linear-gradient(45deg, #748DFB, #3859E8)'},{value: 'test2',label: '中国华夏银行',cardLinearColor: 'linear-gradient(45deg, #616161, #484848)'},],default: 'test3',theme: {light: {primary: 'blue',unselectedRadioBg: '#eaeaea',selectedBg: 'hsla(0,0%,100%,0.5)',},dark: {primary: 'blue',unselectedRadioBg: 'hsl(223,90%,30%)',selectedBg: 'hsla(223,90%,30%,0.5)'}}
});
const changeEvent = (el) => {console.log('点击:', el);
}
</script><style lang="scss" scoped>.light {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,90%);margin: 20px;height: 300px;overflow: auto;}.dark {border-radius: 10px;padding: 20rpx;font-size: 24rpx;background-color: hsl(223,90%,10%);color: white;margin: 20px;height: 300px;overflow: auto;}
</style>

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

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

相关文章

Linux操作系统项目上传Github代码仓库指南

文章目录 1 创建SSH key2.本地git的用户名和邮箱设置3.测试连接4.创建仓库5.终端项目上传 1 创建SSH key 1.登录github官网,点击个人头像,点击Settings,然后点击SSH and GPG keys,再点击New SSH key。 Title 可以随便取&#xff0c;但是 key 需要通过终端生成。 Linux终端执行…

运用Tensorflow进行目标检测

对象检测是一种计算机视觉技术&#xff0c;它使软件系统能够从给定的图像或视频中检测、定位并跟踪物体。对象检测的一个特殊属性是它能识别对象的类别&#xff08;如人、桌子、椅子等&#xff09;并在给定图像中指出其具体位置坐标。这个位置通常通过在物体周围绘制一个边界框…

探究java反射取值与方法取值性能对比

探究java反射取值与方法取值性能对比 由于我开发框架时&#xff0c;经常需要对象取值。常用的取值方式有&#xff1a; 反射取值方法调用取值 环境 同一台电脑&#xff1a; jdk 21.0.2 idea 2023.3.3 1. 测试代码&#xff08;常用&#xff09; 1.1 反射取值 public stat…

u-boot增加自定义命令

0、说明 本文基于U-Boot 2022.01-v2.07版本进行分析。 1、u-boot编译流程简要分析 2、u-boot启动流程简要分析 3、u-boot增加自定义命令 3.1、u-boot命令行实现简要分析 1&#xff09;cli_init命令行初始化 cli_init定义在common\cli.c中&#xff1a;void cli_init(void) {…

C++基础入门 --- 练习案例【1-10】

文章目录 C基础入门 --- 练习案例1.三只小猪称体重2.猜数字3.水仙花数4.敲桌子5.乘法口诀表6.五只小猪称体重7.数组元素逆置8.考试成绩统计9.冒泡排序10.结构体数组排序 C基础入门 — 练习案例 1.三只小猪称体重 说明&#xff1a;有三只小猪分别为A、B、C,分别输入三只小猪的…

【Web】浅浅地聊JDBC java.sql.Driver的SPI后门

目录 SPI定义 SPI核心方法和类 最简单的SPIdemo演示 回顾JCBC基本流程 为什么JDBC要有SPI JDBC java.sql.Driver后门利用与验证 SPI定义 SPI&#xff1a; Service Provider Interface 官方定义&#xff1a; 直译过来是服务提供者接口&#xff0c;学名为服务发现机制 它通…

acme.sh申请ssl免费证书

参考 https://blog.csdn.net/fyhju1/article/details/120452141 获取域名服务商AccessKey ID及AccessKey Secret https://help.aliyun.com/zh/ram/user-guide/create-an-accesskey-pair 安装ACME curl https://get.acme.sh | sh source ~/.bashrc如果使用root用户进行安装&…

如何在windows上像linux的ssh一样远程访问其它windows

主要分成两部分&#xff1a; 1. 如何远程执行指令 使用psexec&#xff0c;示例如下&#xff1a; PsExec64.exe \\远程计算机ip -u 用户名 -p 密码 -i cmd.exe 这样你就能连接到远程计算机上执行命令了&#xff0c;效果如下 2. 如何远程拷贝文件 分成两步&#xff1a; net…

【语法基础练习】1.变量、输入输出、表达式与顺序语句

&#x1f338;博主主页&#xff1a;釉色清风&#x1f338;文章专栏&#xff1a;算法练习&#x1f338;今日语录&#xff1a;You don’t know until you try. 文章简介&#xff1a;下面的题目是AcWing网站语法基础练习篇的第一小节&#xff0c;内容基础&#xff0c;难度&#xf…

计算机组成原理-累加器实验——沐雨先生

一、实验目的 1.理解累加器的概念和作用 2.连接运算器、存储器和累加器&#xff0c;熟悉计算机的数据通路 3.掌握使用微命令执行各种操作的方法。 二、实验要求 1.做好实验预习&#xff0c;读懂实验电路图&#xff0c;熟悉实验元器件的功能特性和使用方法。在实验之前设计…

list链表的创建,排序,插入, test ok

1. 链表的建立&#xff0c;打印 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stack> #include <iostream> #include <string.h> #include <string>using namespace std;struct node {int data;s…

Vue项目性能分析工具: vue-cli-plugin-webpack-bundle-analyzer

在优化项目的时候&#xff0c;每次打包后只知道包文件大&#xff0c;却不知道那个文件大&#xff0c;那个文件还有优化的空间&#xff0c;所以&#xff0c;推荐一款工具&#xff0c;只要在项目中安装配置一下&#xff0c;便可以一目了然的呈现出打包后资源所占的比例&#xff0…

【贪心算法】摆动序列

如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 例如&#xff0c; [1, 7, 4, 9, 2, 5] 是一个 摆动序列 &…

【vue项目适配可借助于插件lib-flexible 和postcss-px2rem】

前言&#xff1a;vue项目适配可借助于插件lib-flexible 和postcss-px2rem。 lib-flexible插件的作用&#xff1a;根据屏幕尺寸不同设置html根标签的字体大小&#xff0c;1rem即等于根标签的字体大小。 postcss-px2rem插件的作用&#xff1a;将px转为rem,如此以来我们可以在开…

Python与HTTP服务交互

Python与HTTP服务交互&#xff0c;可以通过http.client requests RissionPage等。 http.client标准库 http.client 是Python标准库中的一个模块&#xff0c;用于发送HTTP请求。这个模块提供了一个低级别的接口&#xff0c;允许你手动构建HTTP请求并处理响应。下面是对 http.c…

(科目三)数据库基础知识

1、基本概念 1.1 数据库 1、数据、信息和数据处理 数据是指表达信息的某种物理符号&#xff1b; 信息是对客观事物的反映&#xff0c;是为某一特定目的二提供的决策数据&#xff1b; 数据处理是指将数据转换成信息的过程&#xff0c;是对各类型的数据进行收集、整理、存储、…

军用技术民用开花,Shokz韶音要做下一个“AirPods”

Shokz韶音对打造消费级骨传导耳机的执念始于2007年。 在这之前&#xff0c;它已经成为亚洲最大的军用耳机生产商&#xff0c;以代工订单为主的商业模式是Shokz韶音的主营业务。虽然Shokz韶音靠代工赚得了第一桶金&#xff0c;但军用耳机的垂直细分市场容量有限&#xff0c;市场…

java构造函数

Java中的构造函数是一种特殊类型的方法&#xff0c;用于在创建对象时初始化对象的状态。构造函数与类同名&#xff0c;没有返回类型&#xff0c;并且在创建对象时自动调用。它可以用于执行必要的初始化操作&#xff0c;例如设置对象的初始值、分配内存等。以下是一个简单的Java…

Python 实现冒泡排序算法

Python 实现冒泡排序算法 下面是用 Python 实现的冒泡排序算法示例代码&#xff1a; def bubble_sort(arr):n len(arr)# 遍历数组元素for i in range(n):# 每次遍历都将最大的元素移动到最后for j in range(0, n-i-1):# 如果相邻的元素逆序&#xff0c;则交换它们if arr[j] …

Kafka数据推送配置 | 如何设置账号密码验证?

背景&#xff1a;之前资产信息用网络接口进行数据推送&#xff0c;但是接口推送需要验证而且反应较慢。Kafak中间件提供了另一种可行的数据推送方式&#xff0c;它可以进行消息队列推送&#xff0c;且反应速度快。但是Kafka需部署在公网环境&#xff0c;并进行登录验证&#xf…