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'/ 'fadeInLeft'/'fadeInRight'/'springIn'/'scaleIn' |
'fadeIn' | 打开动画类型 |
out | 'fadeOut'/'fadeOutDown'/'fadeOutUp'/'slideUp'/ 'fadeOutLeft'/'fadeOutRight'/'springOut'/'scaleOut' |
'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.value | string | '' | 内边距类名 |
媒体配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | 目标节点填充回调 |