Class Picker

Picker 弹窗, 支持 PC 和移动端

Remarks

Picker 是一个通用的弹窗组件，可以用于日期选择器、时间选择器等场景。它提供了丰富的配置选项，可以自定义弹窗的样式、位置、触发方式等。

Example

import "@skax/picker/dist/style/css";
import Picker from '@skax/picker';
const picker = new Picker(document.getElementById('picker-container'),
{
  placement: 'bottom',
  content: '<div>选择内容</div>', // or () => '<div>选择内容</div>'
  trigger: 'click',
  isMobile: false,
});
picker.open = true; // 打开弹窗
picker.setPlacement('top'); // 设置弹窗位置
picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容（会覆盖之前的内容）
picker.destroy(); // 销毁弹窗

Index

Constructors

constructor

new Picker(
container: HTMLElement | (() => HTMLElement) | null,
options: Partial<PickerOptions>,
): Picker
创建一个 Picker 实例
Parameters
- container: HTMLElement | (() => HTMLElement) | null
  容器元素，可以是 HTMLElement 或一个返回 HTMLElement 的函数。
- options: Partial<PickerOptions>
  选项对象，包含以下属性：
  
  wrapClassName: 前缀类名，默认为 ""。
  
  isMobile: 是否为移动端，默认为 false。
Returns Picker
- Defined in index.ts:150

Properties

$body

$body: HTMLElement

内容主体节点

$container

$container: HTMLElement | null

容器触发节点，当容器不存在，可以使用 picker.open 来触发打开

$wrapperContent

$wrapperContent: HTMLElement

内容节点

`Static`VERSION

VERSION: string = '__VERSION__'

版本号

Example

Picker.VERSION; // 输出版本号

Accessors

disabled

get disabled(): boolean

获取或设置禁用状态

Returns boolean

Example

picker.disabled = true; // 禁用
picker.disabled = false; // 启用
console.log(picker.disabled); // 获取禁用状态

set disabled(disabled: boolean): void
Parameters
- disabled: boolean
Returns void
- Defined in index.ts:273

open

get open(): boolean

获取当前打开状态

Returns boolean

Example

console.log(picker.open); // 获取当前打开状态
picker.open = true; // 打开
picker.open = false; // 关闭

set open(open: boolean): void
Parameters
- open: boolean
Returns void
- Defined in index.ts:198

Methods

`Protected`_onContainerClick

_onContainerClick(event: Event): void
$container click event
Parameters
- event: Event
  鼠标点击事件
Returns void
- Defined in index.ts:539

`Protected`_onHide

_onHide(e?: Event): void
隐藏事件
Parameters
- Optionale: Event
Returns void
- Defined in index.ts:570

`Protected`_onOpenChange

_onOpenChange(open: boolean): void
picker 面板展开或关闭变化时触发
Parameters
- open: boolean
  true: 展开, false:关闭
Returns void
- Defined in index.ts:342

`Protected`_onShow

_onShow(): void
显示事件

Returns void
- Defined in index.ts:554

destroy

destroy(): void
销毁

Returns void
Example
```
picker.destroy();
```
- Defined in index.ts:312

innerHTML

innerHTML(html?: string): void
设置内容（会覆盖之前内容）
Parameters
- Optionalhtml: string
  html 字符串内容
Returns void
Example
```
picker.innerHTML('<div>内容</div>');
```
- Defined in index.ts:327

setPlacement

setPlacement(placement: PickerPlacement): void
设置弹出位置(移动端不生效)
Parameters
- placement: PickerPlacement
  弹出位置
Returns void
Example
```
picker.setPlacement("top");
picker.setPlacement("tl");
picker.setPlacement("tr");
picker.setPlacement("bottom");
picker.setPlacement("bl");
picker.setPlacement("br");
```
- Defined in index.ts:295

Class Picker

Remarks

Example

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Picker

Properties

$body

$container

$wrapperContent

StaticVERSION

Example

Accessors

disabled

Returns boolean

Example

Parameters

Returns void

open

Returns boolean

Example

Parameters

Returns void

Methods

Protected_onContainerClick

Parameters

Returns void

Protected_onHide

Parameters

Returns void

Protected_onOpenChange

Parameters

Returns void

Protected_onShow

Returns void

destroy

Returns void

Example

innerHTML

Parameters

Returns void

Example

setPlacement

Parameters

Returns void

Example

Settings

On This Page

`Static`VERSION

`Protected`_onContainerClick

`Protected`_onHide

`Protected`_onOpenChange

`Protected`_onShow