i-picker

i-picker 选择器

A powerful mobile picker component for Vue. Supports datetime or custom select option

使用指南

import iPicker from 'i-picker';
 
Vue.use(iPicker);

普通 Picker 代码演示

基础用法

通过 values 来设置默认值或改变对应值，注意不要设置列表数据中不存在的value值 非datetime需要设置 columns 列数据

<button @click="show = true">show</button>
<i-picker v-model="show" :value="values" :columns="columns" @change="onChange" />

export default {
  data() {
    return {
      values: [],
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
    };
  },
  methods: {
    onChange (picker, text, index, disabled) {
      console.log(`当前值：${text}, 当前value：${this.values}, 当前索引：${index}, 当前数据disabled状态：${disabled}`);
    }
  }
};

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项

如果设置的values中的数据是 disabled 状态，则默认为下一个 disabled 不为true的数据

如果该列所有的选项都是 disabled 的状态，默认返回第一个，可以通过 change 事件最后一个返回参数 disabled 来判断数据状态

<i-picker v-model="show" :value="values" :columns="columns" @confirm="onConfirm" />

let yearTotal = []
for (var i = 2000; i <= 2030; i++) {
  yearTotal.push({
    name: i + '年',
    value: i,
    disabled: i % 5 === 0
  })
}
 
export default {
  data() {
    return {
      values: [],
      columns: yearTotal
    };
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
    }
  }
};

展示顶部栏

<i-picker 
  v-model="show"
  :value="values"
  :columns="columns"
  @change="onChange"
  @cancel="onCancel"
  @confirm="onConfirm"
  :visibleItemCount="5"
  toolbar
  title="iPicker"/>

export default {
  data() {
    return {
      values: [2],
      columns: [
        {name: '杭州', disabled: true},
        {name: '宁波'},
        {name: '温州', disabled: true},
        {name: '嘉兴'},
        {name: '湖州'}
      ]
    }
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
      console.log(`当前值：${text}, 当前索引：${index}`);
    },
    onCancel() {
      console.log('取消');
    }
  }
};

多列异步动态联动

keys 用于设置多列列表的数据，一个 keys 对应一个列表的数据

<i-picker
  v-model="show"
  :value="values"
  :columns="columns"
  @change="onChange"
  @cancel="onCancel"
  @confirm="onConfirm"
  toolbar
  title="iPicker"/>

export default {
  data() {
    return {
      values: [],
      columns: [
        {keys: ['浙江', '河北']},
        {keys: [{name: '杭州'}, {name: '宁波', disabled: true}, {name: '温州'}]}
      ]
    };
  },
  methods: {
    onChange (picker, text, value, index, disabled) {
      switch(text[0]) {
        case '浙江':
          picker.setColumnKeys(1, [{name: '杭州'}, {name: '宁波', disabled: true}, {name: '温州'}]);
          break;
        case '河北':
          picker.setColumnKeys(1, [
            {name:'石家庄市', value: 'shijiazhuang'},
            {name:'唐山市', value: 'tangshan'},
            {name:'秦皇岛市', value: 'qinhuangdao'},
            {name:'邯郸市', value: 'handan'},
            {name:'邢台市', value: 'xingtai'},
            {name:'保定市', value: 'baoding'}
          ]);
          break;
        default:
          break;
      }
    },
    onConfirm (text, value, index, disabled) {
      this.values = value
    },
    onCancel () {
      console.log('cancle')
    }
  }
};

多列父子联动

<i-picker 
  v-model="show"
  :value="values"
  :columns="columns"
  @cancel="onCancel"
  @confirm="onConfirm"
  toolbar
  title="iPicker"/>

export default {
  data() {
    return {
      values: ['cn004', 'yuncheng'],
      columns: [
        {
          keys: [
            {name:'北京', value: 'cn001'},
            {name:'天津', value: 'cn002'},
            {name:'河北', value: 'cn003'},
            {name:'山西', value: 'cn004'},
          ],
          className: 'column1'
        },
        {
          keys: {
            'cn001': [
              {name:'北京市', value: 'beijing'}
            ],
            'cn002': [
              {name:'天津市', value: 'tianjing', disabled: true},
            ],
            'cn003': [
              {name:'石家庄市', value: 'shijiazhuang'},
              {name:'唐山市', value: 'tangshan'},
              {name:'秦皇岛市', value: 'qinhuangdao'},
              {name:'邯郸市', value: 'handan'},
              {name:'邢台市', value: 'xingtai'},
              {name:'保定市', value: 'baoding'},
            ],
            'cn004': [
              {name:'太原市', value: 'taiyuan'},
              {name:'大同市', value: 'datong'},
              {name:'阳泉市', value: 'yangquan'},
              {name:'长治市', value: 'changzhi'},
              {name:'晋城市', value: 'jincheng'},
              {name:'朔州市', value: 'shuozhou'},
              {name:'晋中市', value: 'jinzhong'},
              {name:'运城市', value: 'yuncheng'},
              {name:'临汾市', value: 'linfen'},
            ]
          },
          className: 'column2'
        },
        {
          keys: {
            'beijing': [
              {name:'东城区', value: 'city001'},
              {name:'西城区', value: 'city002'},
              {name:'朝阳区', value: 'city003'},
              {name:'丰台区', value: 'city004'},
              {name:'石景山区', value: 'city005'},
              {name:'海淀区', value: 'city006'},
            ],
            'tianjing': [
              {name:'和平区', value: '1city'},
              {name:'河东区', value: '2city'},
              {name:'河西区', value: '3city'},
            ],
            'shijiazhuang': [
              {name:'长安区', value: 'changan'}
            ],
            'tangshan': [
              {name:'路南区', value: '001'},
              {name:'路北区', value: '002'},
              {name:'古冶区', value: '003'},
              {name:'开平区', value: '004'},
              {name:'丰南区', value: '005'},
              {name:'丰润区', value: '006'},
              {name:'滦县', value: '007'},
              {name:'滦南县', value: '008'},
            ],
            'qinhuangdao': ['海港区'],
            'handan': ['邯山区'],
            'xingtai': ['桥东区'],
            'baoding': ['竞秀区'],
            'taiyuan': ['小店区'],
            'datong': ['城区'],
            'yangquan': ['矿区'],
            'changzhi': ['长治县'],
            'jincheng': ['城区'],
            'shuozhou': ['朔城区'],
            'jinzhong': ['榆次区'],
            'yuncheng': ['盐湖区', '临猗区', '万荣区'],
            'linfen': [{name:'城区'}, {name:'古县', disabled: true}],
          },
          className: 'column2'
        },
      ]
    };
  }
};

列表数据格式

单列数据格式

// data
['杭州', '宁波', '温州']
 
// 或者使用 name => value 的形式，不设置value的话默认是数组索引值
[
  { name: '杭州', value: 'city01', disabled: true },
  { name: '宁波', value: 'city02'  },
  { name: '温州', value: 'city03', disabled: true  },
]

多列数据格式

keys 数据对应一个列表数据

// ajax异步动态数据
[
  { 
    keys: ['浙江', '天津', '河北', '山西'],
    className: 'column1'
  },
  { 
    keys: [{ name: '杭州' }, { name: '宁波', disabled: true  }, { name: '温州' }]  
  }
]
 
// 或者父子联动数据
[
  {
    keys: [
      {name:'北京', value: 'cn001'},
      {name:'天津', value: 'cn002'},
      {name:'河北', value: 'cn003'},
      {name:'山西', value: 'cn004'},
    ],
    className: 'column1'
  },
  {
    keys: {
      'cn001': [
        {name:'北京市', value: 'beijing'}
      ],
      'cn002': [
        {name:'天津市', value: 'tianjing', disabled: true},
      ],
      'cn003': [
        {name:'石家庄市', value: 'shijiazhuang'},
        {name:'唐山市', value: 'tangshan'},
        {name:'秦皇岛市', value: 'qinhuangdao'},
        {name:'邯郸市', value: 'handan'},
        {name:'邢台市', value: 'xingtai'},
        {name:'保定市', value: 'baoding'},
      ],
      'cn004': [
        {name:'太原市', value: 'taiyuan'},
        {name:'大同市', value: 'datong'},
        {name:'阳泉市', value: 'yangquan'},
        {name:'长治市', value: 'changzhi'},
        {name:'晋城市', value: 'jincheng'},
        {name:'朔州市', value: 'shuozhou'},
        {name:'晋中市', value: 'jinzhong'},
        {name:'运城市', value: 'yuncheng'},
        {name:'临汾市', value: 'linfen'},
      ]
    },
    className: 'column2'
  },
  {
    keys: {
      'beijing': [
        {name:'东城区', value: 'city001'},
        {name:'西城区', value: 'city002'},
        {name:'朝阳区', value: 'city003'},
        {name:'丰台区', value: 'city004'},
        {name:'石景山区', value: 'city005'},
        {name:'海淀区', value: 'city006'},
      ],
      'tianjing': [
        {name:'和平区', value: '1city'},
        {name:'河东区', value: '2city'},
        {name:'河西区', value: '3city'},
      ],
      'shijiazhuang': [
        {name:'长安区', value: 'changan'}
      ],
      'tangshan': [
        {name:'路南区', value: '001'},
        {name:'路北区', value: '002'},
        {name:'古冶区', value: '003'},
        {name:'开平区', value: '004'},
        {name:'丰南区', value: '005'},
        {name:'丰润区', value: '006'},
        {name:'滦县', value: '007'},
        {name:'滦南县', value: '008'},
      ],
      'qinhuangdao': ['海港区'],
      'handan': ['邯山区'],
      'xingtai': ['桥东区'],
      'baoding': ['竞秀区'],
      'taiyuan': ['小店区'],
      'datong': ['城区'],
      'yangquan': ['矿区'],
      'changzhi': ['长治县'],
      'jincheng': ['城区'],
      'shuozhou': ['朔城区'],
      'jinzhong': ['榆次区'],
      'yuncheng': ['盐湖区', '临猗区', '万荣区'],
      'linfen': [{name:'城区'}, {name:'古县', disabled: true}],
    },
    className: 'column3'
  }
]

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示

<i-picker v-model="show" :value="values" :columns="columns" :loading="loading" />

自定义展示选项

<i-picker 
  v-model="show"
  :value="values"
  :columns="columns"
  @change="onChange"
  @cancel="onCancel"
  @confirm="onConfirm"
  :visibleItemCount="5"
  toolbar
  title="iPicker"/>

import icon from './assets/tui.png'
 
export default {
  data() {
    return {
      values: [1],
      columns: [
        {name: '宁波'},
        {name: `<img src="${icon}" class="y-custom-icon">杭州`},
        {name: '温州'},
        {name: '嘉兴'},
        {name: '湖州'}
      ]
    }
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
      console.log(`当前值：${text}, 当前索引：${index}`);
    },
    onCancel() {
      console.log('取消');
    }
  }
};

<style>
.y-custom-icon {
  width: 22px;
  height: 22px;
  margin: 0 3px 0 0;
  vertical-align: text-bottom;
}
</style>

datetime Picker 代码演示

基础用法

需要设置 type 类型

<i-picker
  v-model="show"
  :value="currentDate"
  format="YYYY-MM-DD HH:mm:ss"
  type="datetime"
  :min-date="minDate"
  :max-date="maxDate"
  @change="onChange"
  toolbar
  @cancel="onCancel"
  @confirm="onConfirm"
  title="iPicker"/>

export default {
  data() {
    return {
      currentDate: new Date(2018, 0, 1),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2019, 10, 1)
    };
  },
  methods: {
    onConfirm (text, value, index, disabled) {
      this.currentDate = value
      console.log(`当前值：${text.join(',')}, 当前value：${value.join(',')}, 当前索引：${index.join(',')}`);
    }
  }
};

选择年月

通过传入 formatter 函数对选项文字进行处理

<i-picker
        v-model="show"
        :value="currentDate"
        format="YYYY-MM"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        toolbar
        @cancel="onCancel"
        @confirm="onConfirm"
        title="iPicker"/>

export default {
  data() {
    return {
      currentDate: new Date(2018, 8, 1),
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(2019, 10, 1)
    }
  },
  methods: {
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    onConfirm (text, value, index) {
      this.currentDate = value
      console.log(`当前值：${text.join(',')}, 当前value：${value.join(',')}, 当前索引：${index.join(',')}`);
    }
  }
};

选择时间

<i-picker
  v-model="show"
  :value="currentTime"
  type="time"
  :min-hour="minHour"
  :max-hour="maxHour"
  @change="onChange"
  toolbar
  @cancel="onCancel"
  @confirm="onConfirm"
  title="iPicker"/>

export default {
  data() {
    return {
      currentTime: '12:30',
      minHour: 10,
      maxHour: 30
    }
  },
  methods: {
    onConfirm (text, value, index) {
      this.currentDate = value
      console.log(`当前值：${text.join(',')}, 当前value：${value.join(',')}, 当前索引：${index.join(',')}`);
    }
  }
};

API

通用API

参数	说明	类型	默认值
show	控制Picker的显隐 使用 v-model 绑定	Boolean	false
values	默认展示值 可以通过values设置选中值	Array | string | Date	[]
toolbar	是否显示顶部栏	Boolean	false
title	顶部栏标题	String	''
loading	是否显示加载状态	Boolean	false
item-height	选项高度	Number	44
confirm-button-text	确认按钮文字	String	确认
cancel-button-text	取消按钮文字	String	取消
visible-item-count	可见的选项个数	Number	5

普通 Picker API

参数	说明	类型	默认值
columns	对象数组，配置每一列显示的数据	Array	[]
value-text	选项对象中，文字对应的 key	String	name
value-key	选项对象中，value对应的 key	String	value

datetime Picker API

参数	说明	类型	默认值
format	格式化 datetime 的展示，不支持特殊字符	String	''
type	类型，可选值为 datetime date time year-month	String	datetime
formatter	对选项文字进行处理，type 支持 year month day year-month	(type, value) => value	-
min-date	可选的最小日期	Date	十年前的 1 月 1 日
max-date	可选的最大日期	Date	十年后的 12 月 31 日
min-hour	可选的最小小时，针对 time 类型	Number	0
max-hour	可选的最大小时，针对 time 类型	Number	23
min-minute	可选的最小分钟，针对 time 类型	Number	0
max-minute	可选的最大分钟，针对 time 类型	Number	59

Event

事件名	说明	参数
close	Picker关闭时触发	关闭回调
confirm	点击完成按钮时触发	所有列选中值，所有列选中值对应的索引，所有列选中值对应的 disabled 状态
cancel	点击取消按钮时触发	所有列选中值，所有列选中值对应的索引，所有列选中值对应的 disabled 状态
change	选项改变时触发	Picker 实例，所有列选中值，当前列对应的索引，所有列选中值对应的 disabled 状态

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key

key	说明
keys	列中对应的备选值
className	为对应列添加额外的class

方法

通过 ref 可以获取到 picker 实例并调用实例方法

方法名	参数	返回值	介绍
getNames	-	names	获取所有列选中的值
getValues	-	values	获取所有列选中的value
getIndexes	-	indexes	获取所有列选中值对应的索引
getDisabled	-	disableds	获取所有列选中值对应的 disabled 状态
getColumnType	columnIndex，type ('getName', 'getIndex')	value	获取对应列选中的值/索引
setColumnKeys	columnIndex, optionIndex	-	设置对应列的备选值