当前位置: 首页 > news >正文

基于Vue和uni-app的增强型单选ccRadioView组件开发

标题:基于Vue和uni-app的增强单选组件ccRadioView的设计与实现

摘要:本文将详细介绍如何使用Vue和uni-app构建一个简单、好用且通用的单选框组件ccRadioView。该组件提供了单选列表的功能,并支持反向传值,方便开发者快速实现单选事件的处理。

一、引言

在前端开发中,单选组件是一种常见的需求。单选框(Radio)允许用户从一组选项中选择一个。然而,原生的单选框样式和交互方式可能无法满足所有需求,因此,我们需要自定义单选框组件,以提供更丰富的样式和交互体验。

二、组件设计

ccRadioView组件的设计基于Vue和uni-app,具有以下几个特点:

  1. 简单易用:组件的使用方式简单,只需传入相关数据即可实现单选功能。

  2. 高度通用:组件适用于多种场景,如表单、弹窗等。

  3. 反向传值:当用户选择某个选项时,组件会自动触发change事件,并将选中的值传递给父组件。

效果图如下:

图片

图片

图片

三、组件实现

  1. 数据绑定

ccRadioView组件通过props接收父组件传入的数据,包括单选数据(radioData)、当前选择序列(curIndex)等。组件内部使用Vue的数据绑定功能,将这些数据与组件的状态进行关联。

  1. 渲染列表

组件使用v-for指令遍历radioData,为每个选项生成一个单选框。同时,使用v-bind指令将curIndex与当前选中的选项进行绑定,以实现单选功能。

  1. 事件处理

组件内部监听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组件开发

标题&#xff1a;基于Vue和uni-app的增强单选组件ccRadioView的设计与实现 摘要&#xff1a;本文将详细介绍如何使用Vue和uni-app构建一个简单、好用且通用的单选框组件ccRadioView。该组件提供了单选列表的功能&#xff0c;并支持反向传值&#xff0c;方便开发者快速实现单选…...

信息系统项目管理师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画影满足你的制作要求 一键追爆款&#xff0c;GPT一键改文 入口工具 AI推文小说&漫画解说&解压混剪 人物定义&#xff0c;角色定义&#xff0c;lora转换&#xff0c;模型转换&#xff0c;可视化参考满足 一键追爆款 一键挂机生成&#xff0c;效果更精彩&#xff…...

在C#中编写递归函数时,为了避免无限递归

在C#中编写递归函数时&#xff0c;为了避免无限递归&#xff08;也称为栈溢出&#xff09;&#xff0c;你需要确保递归调用有一个明确的终止条件。这个终止条件通常基于一个或多个参数&#xff0c;当这些参数满足某个特定条件时&#xff0c;递归就会停止并返回结果。 以下是一…...

css层叠样式表——基础css面试题

1、css样式来源有哪些&#xff1f; 內联样式-<a style"color:red"></a>内部样式-<style></style>外部样式-写在独立.css文件中的浏览器用户自定义样式浏览器默认样式 2、样式优先级问题 不同级别下&#xff1a; !important作为style属性…...

数据库-索引结构(B-Tree,B+Tree,Hash,二叉树)

文章目录 索引结构有哪些&#xff1f;二叉树详解&#xff1f;B-Tree详解?BTree详解&#xff1f;Hash详解&#xff1f;本篇小结 更多相关内容可查看 索引结构有哪些&#xff1f; MySQL的索引是在存储引擎层实现的&#xff0c;不同的存储引擎有不同的索引结构&#xff0c;主要包…...

Microsoft Azure AI语音服务

一&#xff1a;文字转语音SDK安装 安装语音 SDK - Azure AI services | Microsoft Learn 二&#xff1a;基于文本转语音Rest API 文本转语音 API 参考 (REST) - 语音服务 - Azure AI services | Microsoft Learn 三&#xff1a;基于文本合成语音 如何基于文本合成语音 - 语…...

【Linux】常用指令、热键与权限管理

一、常用指令 &#xff08;1&#xff09;ls 功能&#xff1a;列出指定目录下的所有子目录与文件 用法&#xff1a;ls &#xff08;选项&#xff09; &#xff08;目录或文件名&#xff09; 常用选项&#xff1a; -a&#xff1a;列出目录下的所有文件&#xff0c;包括隐藏…...

深度学习知识点全面总结

目录 1.深度学习的一些重要知识点 神经网络: 深度学习模型: 深度学习技术: 深度学习应用: 2.深度学习、机器学习、人工智能 3.用python实现简单神经网络模型 4.用于深度学习显卡推荐排序 5.深度学习如何入门&#xff1f; 掌握基础知识&#xff1a; 选择学习资源&…...

【编写控制手机压测的脚本】

编写一个控制手机压测的脚本可以使用Python语言来实现。以下是一个简单的示例脚本&#xff1a; import subprocess import time# 打开app subprocess.call(["adb", "shell", "am", "start", "-n", "com.example.app/.…...

计算机网络-路由策略与路由控制一

到目前为止我们学习了路由与交换基础&#xff0c;路由协议有静态、RIP、OSPF、IS-IS等&#xff0c;但是根据实际组网需求&#xff0c;往往需要实施一些路由策略对路由信息进行过滤、属性设置等操作&#xff0c;通过对路由的控制&#xff0c;可以影响数据流量转发。 因此我们开始…...

在线3D展示软件三维展示软件推荐哪家?

博维数孪、动动三维和sketchfab的在线网页3D展示软件工具选择哪一比较好&#xff1f; 选择在线3D展示软件时&#xff0c;需要考虑几个关键因素&#xff0c;包括软件的功能、用户界面、价格、社区支持和兼容性等。以上几款软件工具都有各自的优势&#xff0c;具体取决于需求和偏…...

VS Code中PlatformIO IDE的安装并开发Arduino

VS Code中PlatformIO IDE的安装并开发Arduino VS Code的安装 略 PlatformIO IDE的安装 PlatformIO IDE是是什么 PlatformIO IDE 是一个基于开源的跨平台集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于嵌入式系统和物联网&#xff08;IoT&#xff09;开发。…...

Java入门——异常

异常的背景 初识异常 我们曾经的代码中已经接触了一些 "异常" 了. 例如: //除以 0 System.out.println(10 / 0); // 执行结果 Exception in thread "main" java.lang.ArithmeticException: / by zero //数组下标越界 int[] arr {1, 2, 3}; System.out.…...

智慧园区:视频系统建设的核心要素与实践路径

一、背景分析 园区作为城市的基本单元&#xff0c;是最重要的人口和产业聚集区。根据行业市场调研&#xff0c;90%以上城市居民工作与生活在园区进行&#xff0c;80%以上的GDP和90%以上的创新在园区内产生&#xff0c;可以说“城市&#xff0c;除了马路都是园区”。 园区形态…...

基于ChatGLM+Langchain离线搭建本地知识库(免费)

目录 简介 服务部署 实现本地知识库 测试 番外 简介 ChatGLM-6B是清华大学发布的一个开源的中英双语对话机器人。基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT…...

MySQL 进阶使用【函数、索引、视图、存储过程、存储函数、触发器】

前言 做数仓开发离不开 SQL &#xff0c;写了很多 HQL 回头再看 MySQL 才发现&#xff0c;很多东西并不是 HQL 所独创的&#xff0c;而是几乎都来自于关系型数据库通用的 SQL&#xff1b;想到以后需要每天和数仓打交道&#xff0c;那么不管是 MySQL 还是 Oracle &#xff0c;都…...

SCSS详解

SCSS&#xff08;Sassy CSS&#xff09;是Sass 3引入的新语法&#xff0c;完全兼容CSS3&#xff0c;并且继承了Sass的强大功能。与原始的Sass语法不同&#xff0c;SCSS语法使用了和CSS一样的块语法&#xff0c;即使用大括号“{}”将不同的规则分开&#xff0c;使用分号“;”将具…...

Vue 问题集

Q:MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 connection listeners added. Use emitter.setMaxListeners() to increase limit A: 可能由多个问题导致&#xff0c;我的是情况1 1. vue.config.js - devServer 代理设置只能添加10个&#…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

工厂方法模式和抽象工厂方法模式的battle

1.案例直接上手 在这个案例里面&#xff0c;我们会实现这个普通的工厂方法&#xff0c;并且对比这个普通工厂方法和我们直接创建对象的差别在哪里&#xff0c;为什么需要一个工厂&#xff1a; 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类&#xff1a; 两个发…...