Vue-ios-pickers NPM

vue-ios-pickers 组件使用说明

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

DEMO

安装

$ yarn add vue-ios-pickers

$ npm install vue-ios-pickers

使用

引入js全局使用:

<script src="./node_modules/vue-ios-pickers/dist/vue-ios-pickers.min.js"></script>

使用 Vue.use 导入

import VueIosPickers from 'vue-ios-pickers';
Vue.use(VueIosPickers);

页面中使用

// 一个日期的 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	`变更前、后的数据`

其他说明

当使用 date=datetime 时, cols=5;
使用 v-model 进行数据传输, 如果需要初始默认值, 刚把默认值赋值给 v-model;
date=datetime 取值格式必须是 年.月.日时:分
默认值格式: 如果存在 date, 则必须是 String, 否则可以是String 或 Array:
- date存在的String: 2018.08.19 08:08
- Array: ['北京', '西城区', '西长椿街']
- String: 北京,西城区,西长椿街
三级联动时, 后一列的数据取前一列的 children 属性值
新增 date 属性存在时, 年份支持 长期有效(id='-1')

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' },
          ]
        }
      ]
    }
  ]
]