基于Vue和uni-app的增强型单选ccRadioView组件开发
标题:基于Vue和uni-app的增强单选组件ccRadioView的设计与实现
摘要:本文将详细介绍如何使用Vue和uni-app构建一个简单、好用且通用的单选框组件ccRadioView。该组件提供了单选列表的功能,并支持反向传值,方便开发者快速实现单选事件的处理。
一、引言
在前端开发中,单选组件是一种常见的需求。单选框(Radio)允许用户从一组选项中选择一个。然而,原生的单选框样式和交互方式可能无法满足所有需求,因此,我们需要自定义单选框组件,以提供更丰富的样式和交互体验。
二、组件设计
ccRadioView组件的设计基于Vue和uni-app,具有以下几个特点:
-
简单易用:组件的使用方式简单,只需传入相关数据即可实现单选功能。
-
高度通用:组件适用于多种场景,如表单、弹窗等。
-
反向传值:当用户选择某个选项时,组件会自动触发change事件,并将选中的值传递给父组件。
效果图如下:



三、组件实现
-
数据绑定
ccRadioView组件通过props接收父组件传入的数据,包括单选数据(radioData)、当前选择序列(curIndex)等。组件内部使用Vue的数据绑定功能,将这些数据与组件的状态进行关联。
-
渲染列表
组件使用v-for指令遍历radioData,为每个选项生成一个单选框。同时,使用v-bind指令将curIndex与当前选中的选项进行绑定,以实现单选功能。
-
事件处理
组件内部监听change事件,当用户选择某个选项时,触发该事件并将选中的值传递给父组件。通过@change="radioChange"的方式,实现反向传值的功能。
四、示例代码
使用方法
<!-- radioData:单选数据 curIndex:当前选择序列 @change:单选事件 -->
<cc-radioView :radioData="items" :curIndex="current" @change="radioChange"></cc-radioView>
HTML代码实现部分
<template><view><!-- radioData:单选数据 curIndex:当前选择序列 @change:单选事件 --><cc-radioView :radioData="items" :curIndex="current" @change="radioChange"></cc-radioView><button class="botBtn" type="primary" @click="submitBtnClick">完成</button><!-- 设置按钮下面仍然可以滑动 --><view style="height: 30px;"></view></view>
</template><script>export default {data() {return {items: [{value: '1',name: '事项一'},{value: '2',name: '事项二',checked: ''},{value: '3',name: '事项三'},{value: '4',name: '事项四'},{value: '5',name: '事项五'},{value: '6',name: '事项六'},{value: '7',name: '事项七'},{value: '8',name: '事项八'},],current: 0,};},onLoad(e) {let tmpObj = {};if (typeof(e.obj) === 'string') {tmpObj = JSON.parse(e.obj);// 查找元素位置this.current = this.items.findIndex((el) => {return el.name === tmpObj.name});}console.log("序列 = " + this.current);console.log("正向传值 = " + JSON.stringify(tmpObj));},methods: {radioChange: function(evt) {for (let i = 0; i < this.items.length; i++) {if (this.items[i].value === evt.target.value) {this.current = i;break;}}},submitBtnClick: function(e) {console.log("选中的条目 = " + JSON.stringify(this.items[this.current]));this.$eventHub.$emit('fire', this.items[this.current]);uni.navigateBack({delta: 1})}}};
</script><style>/*每个页面公共css */.botBtn {width: 90%;margin-left: 5%;margin-top: 80rpx;height: 92rpx;/* background-color: #F36526 !important; */}
</style>
五、总结
本文介绍了基于Vue和uni-app的单选组件ccRadioView的设计与实现。通过简单的使用方式和高度通用的设计,ccRadioView组件为开发者提供了便捷的单选功能。同时,反向传值的功能使得组件更加灵活,可以满足各种场景下的需求。希望本文能对大家在前端开发中的单选组件设计与实现提供一定的参考和帮助。
项目下载地址:
https://ext.dcloud.net.cn/plugin?id=12977
相关文章:
基于Vue和uni-app的增强型单选ccRadioView组件开发
标题:基于Vue和uni-app的增强单选组件ccRadioView的设计与实现 摘要:本文将详细介绍如何使用Vue和uni-app构建一个简单、好用且通用的单选框组件ccRadioView。该组件提供了单选列表的功能,并支持反向传值,方便开发者快速实现单选…...
信息系统项目管理师0602:项目立项管理 — 历年考题(详细分析与讲解)
点击查看专栏目录 1、2017年11月第31题 题干: 项目经理小李依据当前技术发展趋势和所掌握的技术能否支撑该项目的开发,进行可行性研究。小李进行的可行性研究属于( )。 选项: A. 经济可行性分析 B. 技术可行性分析 C. 运行环境可行性分析 D. 其他方面的可行性分析 答案…...
vue2 中使用audio播放音频
<audio controls ref"audioPlayer" style"width:800px;"><source :src"obj.audioUrl" /></audio> data() {return {obj: {audioUrl: require(../../../../public/audio/video.wav)}}}, 有个地方一定要注意一下. 如果不写req…...
一键追爆款,GPT一键改文 ,绘唐3,绘唐工具
ai画影满足你的制作要求 一键追爆款,GPT一键改文 入口工具 AI推文小说&漫画解说&解压混剪 人物定义,角色定义,lora转换,模型转换,可视化参考满足 一键追爆款 一键挂机生成,效果更精彩ÿ…...
在C#中编写递归函数时,为了避免无限递归
在C#中编写递归函数时,为了避免无限递归(也称为栈溢出),你需要确保递归调用有一个明确的终止条件。这个终止条件通常基于一个或多个参数,当这些参数满足某个特定条件时,递归就会停止并返回结果。 以下是一…...
css层叠样式表——基础css面试题
1、css样式来源有哪些? 內联样式-<a style"color:red"></a>内部样式-<style></style>外部样式-写在独立.css文件中的浏览器用户自定义样式浏览器默认样式 2、样式优先级问题 不同级别下: !important作为style属性…...
数据库-索引结构(B-Tree,B+Tree,Hash,二叉树)
文章目录 索引结构有哪些?二叉树详解?B-Tree详解?BTree详解?Hash详解?本篇小结 更多相关内容可查看 索引结构有哪些? MySQL的索引是在存储引擎层实现的,不同的存储引擎有不同的索引结构,主要包…...
Microsoft Azure AI语音服务
一:文字转语音SDK安装 安装语音 SDK - Azure AI services | Microsoft Learn 二:基于文本转语音Rest API 文本转语音 API 参考 (REST) - 语音服务 - Azure AI services | Microsoft Learn 三:基于文本合成语音 如何基于文本合成语音 - 语…...
【Linux】常用指令、热键与权限管理
一、常用指令 (1)ls 功能:列出指定目录下的所有子目录与文件 用法:ls (选项) (目录或文件名) 常用选项: -a:列出目录下的所有文件,包括隐藏…...
深度学习知识点全面总结
目录 1.深度学习的一些重要知识点 神经网络: 深度学习模型: 深度学习技术: 深度学习应用: 2.深度学习、机器学习、人工智能 3.用python实现简单神经网络模型 4.用于深度学习显卡推荐排序 5.深度学习如何入门? 掌握基础知识: 选择学习资源&…...
【编写控制手机压测的脚本】
编写一个控制手机压测的脚本可以使用Python语言来实现。以下是一个简单的示例脚本: import subprocess import time# 打开app subprocess.call(["adb", "shell", "am", "start", "-n", "com.example.app/.…...
计算机网络-路由策略与路由控制一
到目前为止我们学习了路由与交换基础,路由协议有静态、RIP、OSPF、IS-IS等,但是根据实际组网需求,往往需要实施一些路由策略对路由信息进行过滤、属性设置等操作,通过对路由的控制,可以影响数据流量转发。 因此我们开始…...
在线3D展示软件三维展示软件推荐哪家?
博维数孪、动动三维和sketchfab的在线网页3D展示软件工具选择哪一比较好? 选择在线3D展示软件时,需要考虑几个关键因素,包括软件的功能、用户界面、价格、社区支持和兼容性等。以上几款软件工具都有各自的优势,具体取决于需求和偏…...
VS Code中PlatformIO IDE的安装并开发Arduino
VS Code中PlatformIO IDE的安装并开发Arduino VS Code的安装 略 PlatformIO IDE的安装 PlatformIO IDE是是什么 PlatformIO IDE 是一个基于开源的跨平台集成开发环境(IDE),专门用于嵌入式系统和物联网(IoT)开发。…...
Java入门——异常
异常的背景 初识异常 我们曾经的代码中已经接触了一些 "异常" 了. 例如: //除以 0 System.out.println(10 / 0); // 执行结果 Exception in thread "main" java.lang.ArithmeticException: / by zero //数组下标越界 int[] arr {1, 2, 3}; System.out.…...
智慧园区:视频系统建设的核心要素与实践路径
一、背景分析 园区作为城市的基本单元,是最重要的人口和产业聚集区。根据行业市场调研,90%以上城市居民工作与生活在园区进行,80%以上的GDP和90%以上的创新在园区内产生,可以说“城市,除了马路都是园区”。 园区形态…...
基于ChatGLM+Langchain离线搭建本地知识库(免费)
目录 简介 服务部署 实现本地知识库 测试 番外 简介 ChatGLM-6B是清华大学发布的一个开源的中英双语对话机器人。基于 General Language Model (GLM) 架构,具有 62 亿参数。结合模型量化技术,用户可以在消费级的显卡上进行本地部署(INT…...
MySQL 进阶使用【函数、索引、视图、存储过程、存储函数、触发器】
前言 做数仓开发离不开 SQL ,写了很多 HQL 回头再看 MySQL 才发现,很多东西并不是 HQL 所独创的,而是几乎都来自于关系型数据库通用的 SQL;想到以后需要每天和数仓打交道,那么不管是 MySQL 还是 Oracle ,都…...
SCSS详解
SCSS(Sassy CSS)是Sass 3引入的新语法,完全兼容CSS3,并且继承了Sass的强大功能。与原始的Sass语法不同,SCSS语法使用了和CSS一样的块语法,即使用大括号“{}”将不同的规则分开,使用分号“;”将具…...
Vue 问题集
Q:MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 connection listeners added. Use emitter.setMaxListeners() to increase limit A: 可能由多个问题导致,我的是情况1 1. vue.config.js - devServer 代理设置只能添加10个&#…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识:什么是 B-Tree 和 BTree? B-Tree(平衡多路查找树) BTree(B-Tree 的变种) 二、结构对比:一张图看懂 三、为什么 MySQL InnoDB 选择 BTree? 1. 范围查询更快 2…...
tauri项目,如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值,可以通过标准的依赖: std::env::var(name).ok() 想在前端通过调用来获取,可以写一个command函数: #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...
【C++】纯虚函数类外可以写实现吗?
1. 答案 先说答案,可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...
