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

news/2024/7/27 7:20:44/文章来源:https://blog.csdn.net/qq_42278240/article/details/136474484

采用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.luyixian.cn/news_show_999165.aspx

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

相关文章

【Spring Boot 源码学习】BootstrapContext的实际使用场景

《Spring Boot 源码学习系列》 BootstrapContext的实际使用场景 一、引言二、往期内容三、主要内容3.1 BootstrapContext3.2 BootstrapRegistry 初始化器实现3.3 BootstrapContext 的实际使用场景3.3.1 早期启动时3.3.2 环境配置准备完成时3.3.3 应用上下文准备完成后关闭 Boot…

使用Opencv库直接进行人脸检测

import cv2abs_path cv2.__file__ xml_path abs_path.rsplit("/",1)[0] "/data/haarcascade_frontalface_default.xml"# 加载人脸检测器 face_cascade cv2.CascadeClassifier(xml_path)# 加载图像 img cv2.imread(/media/datasets/face/liuyigei_duo.…

uniapp列表进入动画

app列表入场动画 - DCloud 插件市场 列表入场动画https://ext.dcloud.net.cn/plugin?id16957

WordPress 从入门到精通【设置 WordPress】

前言&#xff1a;为方便演示&#xff0c;前几张图使用 Playground 环境截取 如果你还不会部署WordPress&#xff0c;请看下面的链接并使用雨云可视化构建一个WordPress站点&#xff1a; 超简单EP面板搭建WordPress网站教程 - 风屿岛 10 (biliwind.com) 进入仪表盘 在搭建完…

禁止使用搜索引擎,你了解吗?

员工A&#xff1a;“我今天想搜索的时候&#xff0c;用不了浏览器了&#xff0c;你能用么&#xff1f;” 员工B&#xff1a;“不知道啊我试一下啊” “也不行” 员工C&#xff1a;“为什么啊&#xff1f;” 针对上述对话&#xff0c;我们不禁思考&#xff1a; 公司为什么禁…

机器学习-可解释性机器学习:随机森林与fastshap的可视化模型解析

一、引言 机器学习在当今社会扮演着日益重要的角色&#xff0c;但黑盒模型的不可解释性限制了其应用范围。因此&#xff0c;可解释性机器学习成为研究热点&#xff0c;有助于提高模型的可信度和可接受性。本文旨在探讨随机森林和fastshap作为可视化模型解析工具的应用&#xff…

Mysql的Cardinality值

什么是Cardinality值&#xff1f; Cardinality值是Mysql做索引优化时一个非常关键的值&#xff0c;优化器会根据这个值来判断是否使用这个索引&#xff0c;它表示索引中唯一值的数目估计值&#xff0c;该值应该尽可能接近1&#xff0c;如果非常小&#xff0c;则用户需要考虑是否…

机器学习中的线性代数

基础知识的的复习: 线性代数——深度学习花书第二章 - 知乎 矩阵分解 特征值分解。 PCA(Principal Component Analysis)分解,作用:降维、压缩。 SVD(Singular Value Decomposition)分解,也叫奇异值分解。 矩阵分解的主要应用是:降维、聚类分析、数据预处理、低维度特征学…

音视频学习笔记——实现PCM和H264合成MP4功能

本文主要记录实现PCM和H264合成MP4功能的整个框架&#xff0c;各个模块中FFmpeg的api使用流程&#xff0c;便于后续学习和复盘。 本专栏知识点是通过<零声教育>的音视频流媒体高级开发课程进行系统学习&#xff0c;梳理总结后写下文章&#xff0c;对音视频相关内容感兴趣…

linux——线程(1)

我们在使用各种面向对象语言的时候或多或少会使用到语言的线程库&#xff0c; 它可以让我们的一个程序分成多个执行流进行并发执行&#xff0c;这样的模式会 大大提高我们代码的运行效率&#xff0c;而Linux操作系统中也有着属于自己的线 程库。从今天开始就由我来开始介绍Linu…

UE4 Niagara 关卡4.1官方案例解析

we now directly supporting playing audio from arbitrary locations in particle systems.users have control over volume and pitch,and the system can directly play sound waves,or sound cues which have multiple waves in them.(我们现在直接支持在粒子系统中从任意…

小白跟做江科大51单片机之AD/DA

1.看原理图找接口 2.看时序图编写读取数据代码 XPT2046.c代码 #include <REGX52.H> //引脚定义 sbit XPY2046_DINP3^4; sbit XPY2046_CSP3^5; sbit XPY2046_DCLKP3^6; sbit XPY2046_DOUTP3^7; unsigned int XPT2046_ReadAD(unsigned char Command) { unsigned char …

【重温设计模式】中介者模式及其Java示例

中介者模式的基本概念 在我们的日常生活中&#xff0c;有许多事情是需要通过一个“中介”来完成的&#xff0c;比如租房、买房、找工作等。在软件设计中&#xff0c;也有一种名为“中介者模式”的设计模式&#xff0c;它的作用和我们生活中的“中介”有着异曲同工之妙。 中介者…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Divider)

提供分隔器组件&#xff0c;分隔不同内容块/内容元素。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Divider() 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使…

微服务超大Excel文件导出方案优化

1、在导出Excel时经常会碰到文件过大&#xff0c;导出特别慢 2、微服务限制了请求超时时间&#xff0c;文件过大情况必然超时 优化思路&#xff1a; 1、文件过大时通过文件拆分、打包压缩zip&#xff0c;然后上传到oss,并设置有效期&#xff08;30天过期&#xff09; 2、把…

selenium爬取房价收入比可视化

数据来源&#xff1a;聚合数据 from selenium import webdriver from bs4 import BeautifulSoup import csv from selenium import webdriver from fake_useragent import UserAgent import random import subprocess from selenium import webdriver from selenium.webdrive…

Java高频面试之消息队列与分布式篇

有需要互关的小伙伴,关注一下,有关必回关,争取今年认证早日拿到博客专家 消息队列的基本作用&#xff1f; 异步通信&#xff1a;消息队列提供了异步通信的能力&#xff0c;发送方可以将消息发送到队列中&#xff0c;而无需等待接收方立即处理。发送方和接收方可以解耦&#x…

window vscode安装node.js

window vscode安装node.js 官网下好vscode 和nodejs 选.msi的安装 点这个安装 下载完 继续安装 完毕后倒杯水喝个茶等2分钟 重启VScode 或者在cmd 运行 npm -v node -v 显示版本号则成功

波卡 Alpha 计划启动,呼唤先锋创新者重新定义 Web3 开发

原文&#xff1a;https://polkadot.network/blog/the-polkadot-alpha-program-a-new-era-for-decentralized-building-collaboration/ 编译&#xff1a;OneBlock 区块链领域不断发展&#xff0c;随之而来的是发展和创新机会的增加。而最新里程碑是令人振奋的 Polkadot Alpha …

鸿蒙Harmony应用开发—ArkTS声明式开发(触摸交互控制:触摸热区设置)

适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。 说明&#xff1a; 从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 responseRegion responseRegion(value: Array<Rectangle> | Rectangle) 设置一个或…