Dropdown下拉菜单模块

2024-06-30 11:16:48首发，7个月前更新

dropdown下拉菜单模块是继承自popup模块，也就是说dropdown的参数格式与popup相同，dropdown下拉菜单模块强调的是通过创建列表并给目标节点传递checked值；该模块的列表结构是bullet；该模块支持多种列表形式，支持单选和多选列表。

ax.Dropdown下拉菜单模块(class类)详细使用方法和诸多示例 需8金币3个月前更新 Dropdown下拉菜单模块7个月前更新

简单使用

气泡快捷选择是对Popup模块的简单再次封装，简化了参数。

其运行方式有两种：

对元素追加ax-dropdown属性，必填content参数即可。
以id+new的形式运行实例。

输出
HTML
JS

```
                
                
            
```

                
                new ax.Dropdown('#demo01',{
                    content:'中华上下五千年！',
                })

纯文本

气泡装入纯文本的方式有几种：

直接对content参数传入纯文本即可，支持html标签
参数content使用DOM节点选择器，contType填入'html'

输出
HTML
JS

中华上下五千年！
```
                
                
            
```

                
                new ax.Dropdown('#demo01',{
                    content:'中华上下五千年！',
                })

bullet列表字符串

如果配合content和contType获得是bullet列表字符串，将以文本形式插入气泡当中。

方法一：content直接传入字符串
方法二：content为节点或节点选择器，contType设为html

输出
HTML
JS

```
                
                
            
```

                
                let str = document.querySelector('#tpldata').innerHTML;
                new ax.Dropdown('#fromstr',{
                    content:str,
                });

数据源配置

属性	类型	默认值	说明
content	any	''	数据源
contType	string	'text'	数据类型
contData	object	{}	请求数据
ajax	object	{}	异步请求参数

显示配置

属性	类型	默认值	说明
placement	string	'bottom-start'	相对位置
feature	'button'/'tooltip'/''	''	特殊组合类型
popup	object	{}	弹窗模块参数

列表配置

属性	类型	默认值	说明
listType	'checkboxes'/'radios'/'select-single'/'select-multi'/'custom'/''	''	列表类型
paddingless	boolean	false	是否无内边距
hoverable	boolean	false	是否支持悬停效果
divisible	boolean	false	是否显示分割线
multiline	boolean	false	是否多行显示
cols	number	0	网格布局列数
lines	'fluid'/'fence'/''	''	项目间隔类型

节点配置

属性	类型	默认值	说明
childSel	string	'[rep="label"]'	子节点选择器
valKey	string	''	取值属性名
detectable	boolean	false	是否校验值一致性