Radios单选组组件

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

radios组件是多个radio单选表单域的合集，支持批量设置attributes属性，支持reset、set、clear等基本的操作方法

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

数据写在标签内

构建多单选组件，核心是获得每一个单选组件的数据，该数据包含了单个单选组件的label、value、disabled和checked值。数据可以以为本形式写在标签内，也可以写在content属性上。

由于数据不是简单的几个文字，所以可以使用content属性引用数据变量。

输出
HTML

[ {label:'军事类',value:'军事类',disabled:false,checked:true}, {label:'人物志类',value:'人物志类',disabled:false,checked:false}, {label:'娱乐类',value:'娱乐类',disabled:false,checked:false} ]
```
                
                
            
```

如果确定label和value是一致，可以使用简化的数据格式。

输出
HTML

['军事类','人物志类','娱乐类']
```
                
                
            
```

数据写在属性上

构建多单选组件，也可以写在content属性上。如果数据比较大，可以使用content属性引用数据变量。

输出
HTML

```
                
                
            
```

提前定义好变量的前提下，content属性引用变量。

输出
HTML

```
                
                
            
```

使用script标签

如果将数组以文本的形式写入标签内，可能不方便编辑，那么可以添加一个script标签并对标签使用type=content属性，将数据以json的形式写入script标签内，这样子方便格式化数据，也方便编辑。

注意，普通的script标签会被执行，但是给该标签添加了一个不被识别的type类型（我们使用content）则该标签则不会被执行。

输出
HTML

```
                
                
            
```

最简单的数据格式

最简单的数据写法是将选项label文本直接写入content属性当中或节点当中，多个选项用英文逗号,隔开。

输出
HTML

军事类,人物志类,娱乐类
```
                
                
            
```

checked属性

checked属性是指让那个单选组件处于checked状态，因为是单选组，该属性只允许填一个值，该值是某个单选组件的value文本(如果数据是简写方式，label=value)。

输出
HTML

[ {label:'军事类',value:'Military',disabled:false,checked:false}, {label:'人物志类',value:'People',disabled:false,checked:false}, {label:'娱乐类',value:'Entertainment',disabled:false,checked:false} ]
```
                
                
            
```

disable属性

disable属性是指让哪些单选组件处于disabled状态，可以填一个值也可以填多个值（是value值而非label值），格式如下：

单值文本，例如：disable='军事类'
单值数组，例如：disable="['军事类']"
多值文本，多值用英文逗号隔开，例如：disable='军事类,人物志类'
多值文本数组，多值用英文逗号隔开，例如：disable="['军事类','人物志类']"

输出
HTML

[ {label:'军事类',value:'Military',disabled:true,checked:true}, {label:'人物志类',value:'People',disabled:false,checked:false}, {label:'娱乐类',value:'Entertainment',disabled:false,checked:false}, {label:'财经类',value:'Finance',disabled:false,checked:false} ]
```
                
                
            
```

type属性

该属性可以设置单选组件的风格类型，因为是单选组件，该属性可选值有：chera、text、btn。

输出
HTML

```
                
                
            
```

type=btn将表现为一个按钮，与普通按钮尺寸一致。

输出
HTML

```
                
                
            
```

type=text将表现为一个文本段落，用来制作文字较多的选项。

输出
HTML

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

Attributes属性

属性名	可选值	默认值	说明
name	-	-	表单字段名称
content	-	-	数据源
checked	-	-	预设选中项
size	'sm'/'md'/'lg'	'md'	尺寸规格
disable	-	-	禁用项配置
type	'chera'/'switch'/'btn'/'text'	-	显示变体类型
layout	'grid'/'flex'/'block'	'block'	布局方式
cols	-	4	网格布局列数
wrap-classes	-	-	外层容器样式类
item-classes	-	-	单项元素样式类
input-classes	-	-	内部表单字段样式类

Methods方法

有组件通用的内置方法：

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

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

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

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