1.2.4 • Published 5 years ago

free-popup v1.2.4

Weekly downloads
1
License
ISC
Repository
github
Last release
5 years ago

Popup


该组件基于webpack(commonjs)+jquery

使用方法

npm install free-popup --save

let popup = require('free-popup');

//基本用法
let _popup = new popup({
    trigger:'.ele',
    triggerType:'click',
    content:'test'
    ...
});

详细的参数列表


trigger

触发对象(必填): jquery 对象(string)

triggerType

触发方式 (选填): 默认为 click 可选项如下:

  • click
  • hover
  • 一切可能有的触发事件

direction

冒泡框出现的方向(选填): 默认为 bottom 可选项如下

  • top
  • right
  • bottom
  • left

position

冒泡框的位置定位,做微调 (选填): Array 默认为0,0 [X,Y] 其中X表示X轴,Y表示Y轴

目前不接受百分比传参

pointer

冒泡框的指针的位置定位,做微调 (选填): Array 默认为0,0 [X,Y] 其中X表示X轴,Y表示Y轴

width

冒泡框的宽度 接受 百分比 | string | number (px)

百分比 相对父元素

height

冒泡框的高度 接受 百分比 | string | number (px)

百分比 相对父元素

fixed

冒泡框定位方式是是否为绝对定位,为 true 的时候为 绝对定位

参数:boolean

style

修改冒泡框本身的样式

参数:object

//例如
style:{
    'background':'red'
}

pointerStyle

修改冒泡框 指针 本身的样式 参数:object

//例如
style:{
    'background':'red'
}

content

冒泡框内容,接受任意HTML

内容为空的时候,冒泡框不会显示

pointerHide

是否隐藏 指针 为 true 的时候隐藏

参数:boolean

autoClose

开启当前冒泡框的时候自动隐藏其他冒泡框,默认为true

参数:boolean

false的时候,不会自动隐藏本身

autoInitContent

参数:boolean

每次触发冒泡框显示的时候都会重新渲染冒泡框本身的内容,不重新传false

forceNoClose

参数:boolean

强制不自动关闭 popup 默认为 false


回调函数

show(str)

显示冒泡框

参数:str(string选填)内容会直接替换content内容

hide()

隐藏冒泡框

showBefore(cb)

显示冒泡框之前,触发cb回调

参数:cb(function选填)

showAfter(cb)

显示冒泡框之后,触发cb回调

参数:cb(function选填)

hideAfter(cb)

显示冒泡框之后,触发cb回调

参数:cb(function选填)

setContent(cb)

可以改变组件本身的this属性,主要用于this.content。方法和其他function api 大同小异。区别在于,当popup是显示的状态下,会立马响应组件,重新渲染内容

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago