# @skax/picker

> picker component for js framework, support mobile and pc

Latest version **1.1.8** (published 2025-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @skax/picker
pnpm add @skax/picker
yarn add @skax/picker
bun add @skax/picker
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2025-12-12 |
| First published | 2025-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 91.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | ShineShao |
| Maintainers | freeshine |
| Keywords | picker |

## Links

- npm: https://www.npmjs.com/package/@skax/picker
- Repository: https://github.com/freeshineit/picker
- Homepage: https://freeshineit.github.io/picker/
- Issues: https://github.com/freeshineit/picker/issues
- npm.io page: https://npm.io/package/@skax/picker

## Recent versions

- 1.1.8 (latest) — 2025-12-12
- 2.0.0-beta.5 (beta) — 2026-09-23
- 2.0.0-alpha.1 (alpha) — 2026-04-21
- 2.0.0-beta.4 — 2026-05-02
- 2.0.0-beta.3 — 2026-04-26
- 2.0.0-beta.2 — 2026-04-25
- 2.0.0-beta.1 — 2026-04-21
- 1.1.9-beta.1 — 2026-03-15
- 1.1.8-beta.1 — 2025-12-12
- 1.1.8-alpha.1 — 2025-12-12
- 1.1.7 — 2025-12-08
- 1.1.6 — 2025-12-08
- 1.1.6-beta.1 — 2025-12-07
- 1.1.6-alpha.1 — 2025-12-07
- 1.1.5 — 2025-11-15
- … 37 more at https://npm.io/package/@skax/picker/versions

## README

## @skax/picker

![build](https://github.com/freeshineit/picker/workflows/build/badge.svg) ![Download](https://img.shields.io/npm/dm/@skax/picker.svg) ![Version](https://img.shields.io/npm/v/@skax/picker.svg) ![License](https://img.shields.io/npm/l/@skax/picker.svg)

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

## npm dist 文件目录

```tree
.
├── index.js // commonjs 入口
├── index.mjs // esm 兼容
├── index.umd.js // umd 兼容
├── style // css 样式文件
│   ├── _style.scss // scss 样式文件
│   ├── css.css // css 样式文件
│   ├── css.js // css 样式文件入口
│   ├── index.js // scss 样式文件入口
│   └── index.scss // scss 样式文件
└── types // 类型定义
    └── index.d.ts
```

## 使用

### esm 引入

```ts
import '@skax/picker/dist/style/css.js';
import Picker from '@skax/picker';
const picker = new Picker(document.getElementById('picker-container'), {
  placement: 'bottom',
  content: '<div>选择内容</div>', //  or () => <div>选择内容</div>
  trigger: 'click',
});
picker.open = true; // 打开弹窗
picker.setPlacement('top'); // 设置弹窗位置
picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容
picker.destroy(); // 销毁弹窗
```

### umd 引入

```html
<link rel="stylesheet" href="./node_modules/@skax/picker/dist/style/css.css" />
<script src="./node_modules/@skax/picker/dist/index.umd.js"></script>
<script>
  const picker = new Picker(document.getElementById('picker-container'), {
    placement: 'bottom',
    content: '<div>选择内容</div>', //  or () => <div>选择内容</div>
    trigger: 'click',
  });
  picker.open = true; // 打开弹窗
  picker.setPlacement('top'); // 设置弹窗位置
  picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容
  picker.destroy(); // 销毁弹窗
</script>
```

[demo](./public/mobile.html)

### 移动端适配

```ts
import '@skax/picker/dist/style/css.js';
import Picker from '@skax/picker';
const picker = new Picker(document.getElementById('picker-container'), {
  // placement: "bottom", // 移动端不支持（默认底部展示）
  content: '<div>选择内容</div>', //  or () => <div>选择内容</div>
  trigger: 'click',
  mobile: true,
});
picker.open = true; // 打开弹窗
picker.setPlacement('top'); // 设置弹窗位置
picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容
picker.destroy(); // 销毁弹窗
```

### sass

```ts
import '@skax/picker/dist/style/index.js'; // import sass file
import Picker from '@skax/picker';
const picker = new Picker(document.getElementById('picker-container'), {
  placement: 'bottom',
  content: '<div>选择内容</div>', //  or () => <div>选择内容</div>
  trigger: 'click',
});
picker.open = true; // 打开弹窗
picker.setPlacement('top'); // 设置弹窗位置
picker.innerHTML('<div>新内容</div>'); // 设置弹窗内容
picker.destroy(); // 销毁弹窗
```

---
_Source: https://npm.io/package/@skax/picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._