基于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个&#…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
