uniapp中组件库的Radio 单选框丰富的使用方法

目录

#平台差异说明

#基本使用

#自定义形状

#禁用radio

#是否禁止点击提示语选中复选框

#自定义颜色

#横向排列形式

#横向两端排列形式

API

#Radio Props

#radioGroup Props

#radio Event

#radioGroup Event


单选框用于有一个选择,用户只能选择其中一个的场景。

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

  • 该组件需要搭配radioGroup组件使用,以便用户进行操作时,获得当前单选框组的选中情况
  • 通过v-modelradioGroup组件绑定一个变量,对应的name将会被选中
<template><u-radio-groupv-model="radiovalue1"placement="column"@change="groupChange"><u-radio:customStyle="{marginBottom: '8px'}"v-for="(item, index) in radiolist1":key="index":label="item.name":name="item.name"@change="radioChange"></u-radio></u-radio-group>
</template><script>
export default {data() {return {// 基本案列数据radiolist1: [{name: '苹果',disabled: false},{name: '香蕉',disabled: false},{name: '橙子',disabled: false}, {name: '榴莲',disabled: false}],// u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中radiovalue1: '苹果',};},methods: {groupChange(n) {console.log('groupChange', n);},radioChange(n) {console.log('radioChange', n);}}
};
</script>

#自定义形状

可以通过设置shapesquare或者circle,将单选框设置为方形或者圆形

<u-radio-group v-model="value"><u-radio shape="circle" label="月明人倚楼"></u-radio>
</u-radio-group>

#禁用radio

设置disabledtrue,即可禁用某个组件,让用户无法点击

<u-radio-group v-model="value"><u-radio :disabled="true" label="明月几时有"></u-radio>
</u-radio-group>

#是否禁止点击提示语选中复选框

设置labelDisabledtrue,即可禁止点击提示语选中复选框

<u-radio-group v-model="value"><u-radio :labelDisabled="true" label="明月几时有"></u-radio>
</u-radio-group>

#自定义颜色

此处所指的颜色,为radio选中时的背景颜色,参数为activeColor

<u-radio-group v-model="value"><u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio>
</u-radio-group>

#横向排列形式

可以通过设置placementrow或者column,将复选框设置为横向排列或者竖向排列

<u-radio-group v-model="value"placement="row"><u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio>
</u-radio-group>

#横向两端排列形式

可以通过设置iconPlacementleft或者right,将复选框勾选图标的对齐设置为左对齐或者右对齐

<u-radio-group v-model="value"iconPlacement="right"><u-radio activeColor="red" label="思悠悠,恨悠悠,恨到归时方始休"></u-radio>
</u-radio-group>

API

#Radio Props

注意:radioradio-group二者同名参数中,radio的参数优先级更高。

参数说明类型默认值可选值
namecheckbox的名称String \ Number--
shape形状,square为方形,circle为圆型Stringsquarecircle
disabled是否禁用Boolean--
labelDisabled是否禁止点击提示语选中复选框String \ Boolean--
activeColor选中状态下的颜色,如设置此值,将会覆盖parent的activeColor值String--
inactiveColor未选中的颜色String--
iconSize图标的大小,单位pxString \ Number--
labelSizelabel的字体大小,px单位String \ Number--
labellabel提示文字,因为nvue下,直接slot进来的文字,由于特殊的结构,无法修改样式String \ Number--
size整体的大小String \ Number--
iconColor图标颜色String--
labelColorlabel的颜色String--

#radioGroup Props

参数说明类型默认值可选值
value绑定的值String\Number\Boolean[]-
disabled是否禁用全部checkboxBooleanfalsetrue
shape形状,circle-圆形,square-方形Stringcirclesquare
activeColor选中状态下的颜色,如子Checkbox组件设置此值,将会覆盖本值String#2979ff-
inactiveColor未选中的颜色String#c8c9cc-
name标识符String--
size整个组件的尺寸,默认pxString \ Number18-
placement布局方式,row-横向,column-纵向Stringrowcolumn
label文本String--
labelColorlabel的字体颜色String#303133-
labelSizelabel的字体大小,px单位String \ Number14-
labelDisabled是否禁止点击文本操作Booleanfalsetrue
iconColor图标颜色String#ffffff-
iconSize图标的大小,单位pxString \ Number12-
borderBottom竖向配列时,是否显示下划线Booleanfalsetrue
iconPlacement勾选图标的对齐方式,left-左边,right-右边Stringleftright

#radio Event

事件名说明回调参数版本
change某个radio状态发生变化时触发(选中状态)name: 通过props传递的name参数-

#radioGroup Event

事件名说明回调参数版本
change任一个radio状态发生变化时触发name: 值为radio通过props传递的name-

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

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

相关文章

复试 || 就业day06(2024.01.01)算法篇

文章目录 前言分糖果最长和谐子序列两个列表的最小索引总和错误的集合两数之和 IV - 输入二叉搜索树 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff0c;当然也可能来自洛谷或其他刷题…

C++ DAY6 作业

1.用模板类写顺序表 #include <iostream>using namespace std;#define MAXSIZE 10 template <typename T> class Arr {T *data NULL;int len 0; public://构造函数Arr():data(new T){}Arr(T a,int len):data(new T(a)),len(len){}//析构函数~Arr(){delete data;}…

【elfboard linux开发板】4. 文件点灯与创建多进程

ps&#xff1a;提升效率的小tips&#xff1a; 灵活运用vim操作命令&#xff0c;gg快速跳转到文件开头&#xff0c;G跳转到结尾 多行操作 ctrl V shift i 插入修改内容 esc退出编辑 sudo vi /etc/vim/vimrc 在文件中添加如下内容省略重复工作&#xff1a; autocmd BufNewFile …

霹雳吧啦Wz《pytorch图像分类》-p3VGG网络

《pytorch图像分类》p3VGG网络详解及感受野的计算 一、零碎知识点1.nn.Sequential2.**kwargs 二、VGG网络模型详解1.感受野2.模型手算 三、代码1.module.py2.train.py3.predict.py 一、零碎知识点 论文连接&#xff1a;VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAG…

结算时间和可组合性助力Sui上DeFi蓬勃发展

结算时间是基于Sui交易处理模型的度量标准&#xff0c;确保DeFi用户几乎立即看到交易结果。可组合性则是深深融入Sui的编程环境&#xff0c;扩展了其对对象和智能合约的影响。Sui深度的可组合性赋予DeFi构建者引入创新产品的能力&#xff0c;使其在其他区块链上的DeFi应用中独树…

基于Java校园招待所管理系统

基于Java校园招待所管理系统 功能需求 1、客房管理&#xff1a;系统需要管理招待所的客房信息&#xff0c;包括房间类型、数量、价格、状态等&#xff0c;并能够实时更新客房状态。 2、客人管理&#xff1a;系统需要记录客人的基本信息&#xff0c;包括姓名、性别、年龄、联…

Crypto的简单应用-前后端加密传输

最近遇到一个数据脱敏处理的需求&#xff0c;想要用一种轻量级的技术实现&#xff0c;必须足够简单并且适用于所有场合如前后端加密传输、路由加密、数据脱敏等。抽时间研究了一下Crypto加密库的一些API&#xff0c;发现完全符合上述需求&#xff0c;扩展也比较容易。 1、前端加…

[C#]使用onnxruntime部署Detic检测2万1千种类别的物体

【源码地址】 github地址&#xff1a;https://github.com/facebookresearch/Detic/tree/main 【算法介绍】 Detic论文&#xff1a;https://arxiv.org/abs/2201.02605v3 项目源码&#xff1a;https://github.com/facebookresearch/Detic 在Detic论文中&#xff0c;Detic提到…

2023.12.27 关于 Redis 数据类型 List 常用命令

目录 List 类型基本概念 List 类型特点 List 操作命令 LPUSH LPUSHX RPUSH RPUSHX LRANGE LPOP RPOP LINDEX LINSERT LREM LTRIM LSET 阻塞版本的命令 阻塞版本 和 非阻塞版本的区别 BLPOP & BRPOP List 类型基本概念 Redis 中的列表&#xff08;list&am…

定时器PWM控制RGB彩灯案例

1.脉冲宽度调制PWM PWM&#xff08;Pulse Width Modulation&#xff09;简称脉宽调制&#xff0c;是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术&#xff0c;广泛应用在测量、通信、工控等方面。   PWM的一个优点是从处理器到​​ ​被控系统​​​信号…

x-cmd pkg | bit - 实验性的现代化 git CLI

目录 简介首次用户功能特点竞品和相关作品进一步探索 简介 bit&#xff0c;由 Chris Walz 于 2020 年使用 Go 语言开发&#xff0c;提供直观的命令行补全提示和建立在 git 命令之上的封装命令&#xff0c;旨在建立完全兼容 git 命令的现代化 CLI。 首次用户 使用 x bit 即可自…

flutter获取本地图片高度、宽度

/*获取本地图片宽度* */getLocalImageWidth(String path){int width;Completer<int> completer new Completer<int>();Image image Image.file(File.fromUri(Uri.parse(path)));// 预先获取图片信息image.image.resolve(new ImageConfiguration()).addListener(n…

test ui-03-cypress 入门介绍

cypress 是什么&#xff1f; 简而言之&#xff0c;Cypress 是一款专为现代Web构建的下一代前端测试工具。我们解决了开发人员和质量保证工程师在测试现代应用程序时面临的关键问题。 我们使以下操作成为可能&#xff1a; 设置测试编写测试运行测试调试测试 Cypress经常与Se…

使用宝塔在Linux面板搭建网站,并实现公网远程访问

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)处理任务队列中的任务

一、处理任务队列中的任务 &#xff08;1&#xff09;EventLoop启动 EventLoop初始化和启动 // 启动反应堆模型 int eventLoopRun(struct EventLoop* evLoop) {assert(evLoop ! NULL);// 取出事件分发和检测模型struct Dispatcher* dispatcher evLoop->dispatcher;// 比较…

2024阿里云Alibaba Cloud Linux 3镜像版本大全说明

Alibaba Cloud Linux阿里云打造的Linux服务器操作系统发行版&#xff0c;Alibaba Cloud Linux完全兼容完全兼容CentOS/RHEL生态和操作方式&#xff0c;目前已经推出Alibaba Cloud Linux 3&#xff0c;阿里云百科aliyunbaike.com分享Alibaba Cloud Linux 3版本特性说明&#xff…

面试算法83:没有重复元素集合的全排列

题目 给定一个没有重复数字的集合&#xff0c;请找出它的所有全排列。例如&#xff0c;集合[1&#xff0c;2&#xff0c;3]有6个全排列&#xff0c;分别是[1&#xff0c;2&#xff0c;3]、[1&#xff0c;3&#xff0c;2]、[2&#xff0c;1&#xff0c;3]、[2&#xff0c;3&…

如何在anaconda里安装basemap和pyproj库

当直接使用conda命令进行安装basemap和pyproj库时&#xff0c;会出现版本不对应的报错问题(如下图)&#xff0c;所以此篇博客用以展示如何安装basemap和pyproj库 题主默认使用的anaconda源已经切换成了清华大学源&#xff0c;但是仍然会出现报错&#xff0c;所以不是源的问题&a…

haproxy笔记

文章目录 场景haproxy配置文档地址 场景 还得先从场景说起。 生产环境redis检查&#xff0c;发现配置的redis地址不对。 redis有3个节点。 192.168.0.1 192.168.0.2 192.168.0.3 但是配置的是 192.168.0.9 端口是16379。 好奇怪有没有&#xff0c;是不是配错了? 问了下部署大…

CMake入门教程【核心篇】函数(function)

&#x1f608;「CSDN主页」&#xff1a;传送门 &#x1f608;「Bilibil首页」&#xff1a;传送门 &#x1f608;「本文的内容」&#xff1a;CMake入门教程 &#x1f608;「动动你的小手」&#xff1a;点赞&#x1f44d;收藏⭐️评论&#x1f4dd; 文章目录 1. 函数的定义与基本…