Popup气泡模块
popup气泡是一个基础模块，是dropdown、tooltip等模块的父类；是class类，可以被extend继承；content参数支持多种数据格式，与contType和contData参数配合使用可获取多种格式数据，包括DOM节点、纯文本、html文本、array和object、form表单等；用户可使用内置的模板解析器解析array和object数据，也可以自定义模板引擎。
简单使用
使用参数content填入文本值即可。
- 输出
- HTML
也可以通过id+new的方式创建实例。
- 输出
- HTML
- JS
-
-
-
new ax.Popup('#demo01',{ content:'世界人民大团结万岁！' });
基础配置参数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| heading | string | '' | 窗口标题 |
| divider | boolean | false | 是否显示标题分割线 |
| duration | number | 0 | 动画时长(ms) |
| autoDur | boolean | false | 是否自动计算动画时间 |
| asleep | boolean | false | 是否禁用show方法 |
| deadShow | boolean | false | 打开后是否禁止关闭 |
| keepShow | boolean | false | 是否只允许显示不允许关闭 |
| classes | string | '' | 窗口样式类 |
| zIndex | number | 0 | 窗口层级 |
| dedicated | boolean | false | 是否阻止与body联动滚动 |
Popup专属配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | 'prim'/'succ'/'info'/'error'/'issue'/'warn'/'text'/ 'prim-lt'/'succ-lt'/'info-lt'/'error-lt'/'issue-lt'/'warn-lt'/'text-lt'/'' |
'' | 主题颜色 |
| placement | 'top-start'/'top-center'/'top-end'/'bottom-start'/'bottom-center'/'bottom-end'/ 'left-start'/'left-center'/'left-end'/'right-start'/'right-center'/'right-end'/ 'top-max'/'bottom-max'/'left-max'/'right-max'/'center-max'/ 'center'/'left'/'right'/'top'/'bottom' |
'top' | 窗口显示位置 |
| size | 'sm'/'md'/'lg'/'xl'/'xxl' | 'md' | 窗口尺寸 |
| height | string | '' | 窗口内容高度 |
| trigger | 'hover'/'click'/'sticky'/'input'/'none' | 'hover' | 显示触发方式 |
| pageClose | boolean | true | 点击外部是否关闭 |
| multiple | boolean | false | 是否允许多窗口 |
| adaptive | boolean | true | 是否自适应位置 |
| position | object | {} | 定位引擎参数 |
| in | 'fadeIn'/'fadeInDown'/'fadeInUp'/'slideDown'/ 'fadeInStart'/'fadeInEnd'/'springIn'/'scaleIn'/'easeIn' |
'fadeIn' | 打开动画类型 |
| out | 'fadeOut'/'fadeOutDown'/'fadeOutUp'/'slideUp'/ 'fadeOutStart'/'fadeOutEnd'/'springOut'/'scaleOut' /'easeOut' |
'fadeOut' | 关闭动画类型 |
| arrow.enable | boolean | true | 是否显示箭头 |
| arrow.size | string | '0.5rem' | 箭头尺寸 |
| arrow.offset | string | '2.8rem' | 箭头边距 |
| arrow.gap | string | '.8rem' | 窗口与按钮距离 |
| wing.selector | string/array | '' | 触发元素选择器 |
| wing.trigger | 'click'/'hover'/'sticky'/'input'/'none' | 'click' | 关联按钮触发方式 |
| wing.actClass | string | '' | 触发按钮激活样式类 |
| onReposition | function | null | 窗口位置更新回调 |
内容配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| content | any | '' | 数据源 |
| contType | 'text'/'html'/'image'/'video'/'audio'/'iframe'/ 'async'/'form'/'input'/'textarea'/'auto' |
'text' | 内容类型 |
| contData | object | {} | 请求数据或媒体属性 |
| ajax | object | {} | 异步请求参数 |
| actClass | string | 'opened' | 打开时目标节点添加的类名 |
| tplStr | string | '' | 模板字符串 |
| tplEng | function | null | 模板引擎 |
| canClick | function | null | 点击触发判断函数 |
内边距配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| padding.enable | boolean | true | 是否显示内边距 |
| padding.body | string / boolean | true | 内容容器的内边距类名，true即添加_p |
| padding.foot | string / boolean | true | 底部容器的内边距类名，true即添加_p |
媒体配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| media.caption | string | '' | 媒体标题 |
| media.brief | string | '' | 媒体简介 |
自动填充配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autoFill.enable | boolean | false | 是否自动填充 |
| autoFill.inputSel | string | '' | 填充节点选择器 |
| autoFill.childSel | string | '' | 子节点选择器 |
| autoFill.detectable | boolean | false | 是否允许反向取值 |
| autoFill.attr | string | '' | 填充节点属性 |
列表配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| bullet.enable | boolean | false | 是否启用列表模式 |
| bullet.type | 'checkboxes'/'radios'/'select-single'/'select-multi'/'custom' | 'custom' | 列表类型 |
| bullet.parentNode | string | 'ul' | 列表父节点名 |
| bullet.childNode | string | 'li' | 列表子节点名 |
| bullet.unpadded | boolean | false | 是否无内间距 |
| bullet.hoverable | boolean | false | 是否支持悬停效果 |
| bullet.divisible | boolean | false | 是否显示分割线 |
| bullet.multiline | boolean | false | 是否多行显示 |
| bullet.cols | number | 0 | 网格列数 |
| bullet.lines | 'fluid'/'fence'/'' | '' | 项目间隔类型 |
| bullet.action | function | null | 列表项处理函数 |
工具栏配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| tools.enable | boolean | true | 是否显示工具栏 |
| tools.placement | 'inside'/'outside' | 'inside' | 工具栏位置 |
| tools.children | array | ['close'] | 工具按钮列表 |
底部配置
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| footer.enable | boolean | true | 是否显示底部 |
| footer.layout | 'center'/'plain'/'right'/'left' | 'plain' | 按钮布局方式 |
| footer.note | boolean | false | 是否显示底部提示 |
| footer.divider | boolean | false | 是否显示底部分割线 |
| footer.padding | boolean | false | 是否显示内边距 |
| footer.children | array | ['cancel', 'confirm'] | 底部按钮列表 |
等待函数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| b4Show | function | null | 显示前等待函数 |
| b4Hide | function | null | 隐藏前等待函数 |
| b4Fill | function | null | 填充前等待函数 |
| b4Confirm | function | null | 确认前等待函数 |
| b4Cancel | function | null | 取消前等待函数 |
回调函数
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| onShow | function | null | 显示前回调 |
| onHide | function | null | 隐藏前回调 |
| onShown | function | null | 显示后回调 |
| onHidden | function | null | 隐藏后回调 |
| onInvalidated | function | null | 表单验证失败回调 |
| onValidated | function | null | 表单验证成功回调 |
| onSended | function | null | 表单发送成功回调 |
| onRender | function | null | 渲染开始回调 |
| onRendered | function | null | 渲染完成回调 |
| onUpdatedCont | function | null | 内容更新回调 |
| onTransferred | function | null | 宿主节点更新回调 |
| onConfirmed | function | null | 确认按钮点击回调 |
| onCanceled | function | null | 取消按钮点击回调 |
| onClosed | function | null | 关闭按钮点击回调 |
| onCleared | function | null | 清除按钮点击回调 |
| onRequest | function | null | 异步请求完成回调 |
| onBulletsChecked | function | null | 列表checked回调 |
| onBulletsSelected | function | null | 列表selected回调 |
| onTargetSet | function | null | 目标节点填充回调 |
