Radio单选表单域组件

2024-06-30 23:47:47首发，2天前更新

radio单选表单域组件是对原生type=radio的二次封装，支持三种状态check、checking和checked；支持多种尺寸以适合不同的表单结构；支持数据缓存和表单校验；支持chera结构形式；支持reset、set、clear等基本的操作方法。

AX-RADIO单选表单域组件(webcomponent)详细使用方法和诸多示例 需4金币2天前更新 Radio单选表单域组件2天前更新

简单使用

使用ax-radio标签包裹文字即可自动创建一个单选组件。除了直接将标签的innerHTML作为label，也可以写在label属性上。

输出
HTML

军事类
```
                
                
            
```

简单name和value

单选组件内核依然是radio输入表单，那么通常需要有name和value属性，所以在正常使用单选组件的时候，应该将name和value写上，如果没有value属性，那么将会以label作为value值。

输出
HTML

军事类人物志类娱乐类财经类
```
                
                
            
```

以上实例并没有使用value属性，但是用户通过浏览器控制台可以发现input已经自带了value属性，并且值等于label。

当然我们并不建议这么做，最好还是专门写上value属性。

check状态

单选组件有三种状态，分别是normal常规状态，checking和checked状态。单选的状态有属性check控制。

check=ing：表示部分单选
check=ed：表示完全选中
check=其他或为null：表示常规状态

输出
HTML

军事类人物志类娱乐类财经类
```
                
                
            
```

取值

可以像原生标签那样获取组件的name、value、checked、disabled值。

注意：radio没有readOnly属性。

输出
HTML
JS

- 点击取值
- 点击取值
- 点击取值
```
                
                
            
```

                
                let vals = document.querySelector('#getVals');
                [...vals.children].forEach(k=>{
                   let btn = k.querySelector('span'),
                       input = k.querySelector('ax-radio');
                    btn.onclick=()=>{
                        btn.innerHTML = `name:${input.name},value:${input.value},checked:${input.checked}`
                    }
                });

块分布

单选组件的表现形态有两种，一种是normal常规形态，一种是块布局形态，通过设置type=chera获得。

输出
HTML

军事类人物志类娱乐类财经类
```
                
                
            
```

多行文本分布

如果一个选项的内容比较多，成段落或成篇幅，可使用type="text"纯文本分布。

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

按钮分布

使用属性type="btn"可让控件呈现一个按钮形状。

输出
HTML

军事类人物志类娱乐类财经类
```
                
                
            
```

禁用状态

单选组件的禁用状态通过disabled属性进行设置。disabled状态有两个特点：

颜色变浅
不可点击

输出
HTML

军事类人物志类娱乐类财经类军事类人物志类娱乐类财经类
```
                
                
            
```

Attributes属性

属性名	可选值	默认值	说明
name	-	-	表单字段名称
value	-	-	表单字段值
check	'ing'/'ed'/''/-	-	选中状态
label	''	-	标签文本
size	'sm'/'md'/'lg'	'md'	尺寸规格
disabled	boolean	-	禁用状态
type	'chera'/'switch'/'btn'/'text'/-	-	显示变体类型
contained	boolean	-	包含开关标签

Methods方法

有组件通用的内置方法：

set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
reset：重置组件属性，无参数
clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

connected：组件连接成功，无参数
disconnected：组件断开连接，无参数
adopted：组件被转移，无参数
set：设置了属性，支持一个参数即设置的值
cleared：清除了属性，无参数
reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});