# vue-ios-pickers

> 基于vue，iOS风格的picker组件，支持三级联动，日期(年.月.日)，时间(时:分)，日期+时间，年，年+月

Latest version **1.4.11** (published 2019-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ios-pickers
pnpm add vue-ios-pickers
yarn add vue-ios-pickers
bun add vue-ios-pickers
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.11 |
| Published | 2019-06-26 |
| First published | 2018-07-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 294.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 25 |
| Author | 音十 |
| Maintainers | yuan_wing |
| Keywords | vue, picker, date, time, datetime, vue-picker, ios-picker |

## Links

- npm: https://www.npmjs.com/package/vue-ios-pickers
- Repository: https://github.com/YuanWing/vue-ios-pickers
- Homepage: https://github.com/YuanWing/vue-ios-pickers#readme
- Issues: https://github.com/YuanWing/vue-ios-pickers/issues
- npm.io page: https://npm.io/package/vue-ios-pickers

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.16

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 1.4.11 (latest) — 2019-06-26
- 1.4.10 — 2019-06-26
- 1.4.9 — 2019-05-29
- 1.4.8 — 2019-05-21
- 1.4.7 — 2019-01-22
- 1.4.6 — 2018-08-08
- 1.4.5 — 2018-08-08
- 1.4.4 — 2018-08-03
- 1.4.3 — 2018-08-03
- 1.4.2 — 2018-07-25
- 1.4.1 — 2018-07-22
- 1.4.0 — 2018-07-22
- 1.3.3 — 2018-07-22
- 1.3.2 — 2018-07-20
- 1.3.1 — 2018-07-20
- … 4 more at https://npm.io/package/vue-ios-pickers/versions

## README

## vue-ios-pickers 组件使用说明
基于Vue，iOS风格的picker组件，支持三级联动，日期(年.月.日)，时间(时:分)，日期+时间，年，年+月
### DEMO
[查看demo](https://yuanwing.github.io/vue-ios-pickers/)
![vue-ios-pickers](./qrCode.png)
### 安装
```
$ yarn add vue-ios-pickers
```
Or
```
$ npm install vue-ios-pickers
```
### 使用
- 引入`js`全局使用:
  ```javascript
  <script src="./node_modules/vue-ios-pickers/dist/vue-ios-pickers.min.js"></script>
  ```
- 使用 `Vue.use` 导入
  ```javascript
  import VueIosPickers from 'vue-ios-pickers';
  Vue.use(VueIosPickers);
  ```
- 页面中使用
  ```javascript
  // 一个日期的 picker  支持 年.月.日 时:分
  <vue-ios-pickers
    date="datetime"
    :cols="5"
  ></vue-ios-pickers>
  ```
### 属性说明:  
| 属性 | 描述 | 类型 | 默认值 |
  | --- | --- | --- | --- |
  | v-model | 组件通信, 初始值(**必填**) | String | Number | Array | `-` |
  | cols | 展示数据的列数, 可取值 `1`, `2`, `3`, `5` | Number | `3` |
  | name | 设置 `picker` 的唯一名称, 会在 `onConfirm` 一起返回 | String | `-` |
  | placeholder | 设置 `picker` 的默认文字 | String | `请选择` |
  | align | 设置文本对齐方式, 可取值 `css -> text-align` | String | `right`
  | pickerData | 需要展示的数据 | Array | `[]` |
  | date | 设置日期类型, 可取值 `date`, `time`, `datetime`, (`pickerData` 将失效) | String | `-` |
  | minDate | 开始时间 | Number | `1949` |
  | maxDate | 结束时间 | Number | `当前年份往后 + 50` |
  | onCancel | 取消的回调函数 | Function | `-` |
  | onConfirm | 确认的回调函数 | Function | `当前选中的数据(Array)及name值` |  
  | onItemChange | 列数据变更的回调函数 | Function | `变更前、后的数据` |
### 其他说明
1. 当使用 `date=datetime` 时, `cols=5`;
2. 使用 `v-model` 进行数据传输, 如果需要初始默认值, 刚把默认值赋值给 `v-model`;
3. `date=datetime` 取值格式必须是 `年.月.日 时:分`
4. 默认值格式: 如果存在 `date`, 则必须是 `String`, 否则可以是`String` 或 `Array`:
    - `date`存在的`String`: `2018.08.19 08:08`
    - `Array`: `['北京', '西城区', '西长椿街']`
    - `String`: `北京,西城区,西长椿街`
5. 三级联动时, 后一列的数据取前一列的 `children` 属性值
6. 新增 `date` 属性存在时, 年份支持 **长期有效(id='-1')**
7. `pickerData`的数据格式:
    ```
    [
      [
        {
          name: '北京',
          id: '010',
          children: [
            {
              name: '北京',
              id: '0101',
              children: [
                { name: '西城区', id: '010101' },
                { name: '东城区', id: '010102' },
                { name: '海淀区', id: '010103' },
              ]
            }
          ]
        }, {
          name: '四川',
          id: '028',
          children: [
            {
              name: '成都市',
              id: '0281',
              children: [
                { name: '武侯区', id: '02811' },
                { name: '青羊区', id: '02812' },
                { name: '成华区', id: '02813' },
                { name: '锦江区', id: '02814' },
                { name: '金牛区', id: '02815' },
              ]
            }, {
              name: '泸州市',
              id: '0282',
              children: [
                { name: '江阳区', id: '02821' },
                { name: '龙马潭区', id: '02822' },
                { name: '纳西区', id: '02823' },
                { name: '泸县', id: '02824' },
              ]
            }
          ]
        }
      ]
    ]
    ```

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