Vue based mobile picker, can set city/datetime/custom selection, share with everyone ~ ~

portal

NPM portal Github portal

Use guide

npm install i-picker --save
Copy the code

import iPicker from 'i-picker';

Vue.use(iPicker);
Copy the code

Ordinary Picker code demo

Basic usage

Use values to set the default value or change the corresponding value. Do not set a value that does not exist in the table data

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

export default {
  data() {
    return {
      values: [].columns: ['hangzhou'.'ningbo'.'the city of wenzhou.'嘉兴'.'the huzhou']}; },methods: {
    onChange (picker, text, index, disabled) {
      console.log('Current value:${text}, current value:The ${this.values}, current index:${index}, the current data status is disabled:${disabled}`); }}};Copy the code

To disable the option

Options can be object structured, which is disabled by setting disabled

If the value is set to Disabled, the value defaults to the next value whose value is not true

If all options in the column are disabled, the first option is returned by default, and the status of the data can be determined by the change event returning disabled as the last parameter

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

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

Show the top bar

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

export default {
  data() {
    return {
      values: [2].columns: [{name: 'hangzhou'.disabled: true},
        {name: 'ningbo'},
        {name: 'the city of wenzhou.disabled: true},
        {name: '嘉兴'},
        {name: 'the huzhou'}}},methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
      console.log('Current value:${text}, current index:${index}`);
    },
    onCancel() {
      console.log('cancel'); }}};Copy the code

Multiple columns are asynchronously and dynamically associated

Keys is used to set data for a multi-column list, one key for one list

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

export default {
  data() {
    return {
      values: [].columns: [{keys: ['zhejiang'.'hebei'] {},keys: [{name: 'hangzhou'}, {name: 'ningbo'.disabled: true}, {name: 'the city of wenzhou}}}]]; },methods: {
    onChange (picker, text, value, index, disabled) {
      switch(text[0]) {
        case 'zhejiang':
          picker.setColumnKeys(1[{name: 'hangzhou'}, {name: 'ningbo'.disabled: true}, {name: 'the city of wenzhou}]);
          break;
        case 'hebei':
          picker.setColumnKeys(1[{name:'Shijiazhuang'.value: 'shijiazhuang'},
            {name:'Tangshan'.value: 'tangshan'},
            {name:'Qinhuangdao'.value: 'qinhuangdao'},
            {name:'Handan city'.value: 'handan'},
            {name:'Xingtai'.value: 'xingtai'},
            {name:'Baoding'.value: 'baoding'}]);break;
        default:
          break;
      }
    },
    onConfirm (text, value, index, disabled) {
      this.values = value
    },
    onCancel () {
      console.log('cancle')}}};Copy the code

Multiple columns parent-child linkage

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

export default {
  data() {
    return {
      values: ['cn004'.'yuncheng'].columns: [{keys: [{name:'Beijing'.value: 'cn001'},
            {name:'tianjin'.value: 'cn002'},
            {name:'hebei'.value: 'cn003'},
            {name:'the shanxi'.value: 'cn004'},].className: 'column1'
        },
        {
          keys: {
            'cn001': [{name:'Beijing'.value: 'beijing'}].'cn002': [{name:Tianjin City.value: 'tianjing'.disabled: true},].'cn003': [{name:'Shijiazhuang'.value: 'shijiazhuang'},
              {name:'Tangshan'.value: 'tangshan'},
              {name:'Qinhuangdao'.value: 'qinhuangdao'},
              {name:'Handan city'.value: 'handan'},
              {name:'Xingtai'.value: 'xingtai'},
              {name:'Baoding'.value: 'baoding'},].'cn004': [{name:'Taiyuan'.value: 'taiyuan'},
              {name:'Datong'.value: 'datong'},
              {name:'Yangquan'.value: 'yangquan'},
              {name:'Changzhi city'.value: 'changzhi'},
              {name:'Jincheng'.value: 'jincheng'},
              {name:'Shuozhou'.value: 'shuozhou'},
              {name:Jinzhong city.value: 'jinzhong'},
              {name:'Transport city'.value: 'yuncheng'},
              {name:'Linfen'.value: 'linfen'}},],className: 'column2'
        },
        {
          keys: {
            'beijing': [{name:'Dongcheng District'.value: 'city001'},
              {name:'West Town'.value: 'city002'},
              {name:'Chaoyang district'.value: 'city003'},
              {name:'Fengtai District'.value: 'city004'},
              {name:'Stoneview Mountain'.value: 'city005'},
              {name:'Haidian District'.value: 'city006'},].'tianjing': [{name:'Zone of Peace'.value: '1city'},
              {name:East Riverside.value: '2city'},
              {name:Hexi District.value: '3city'},].'shijiazhuang': [{name:'Chang 'an District'.value: 'changan'}].'tangshan': [{name:'Lunan District'.value: '001'},
              {name:'Lu Bei district'.value: '002'},
              {name:'Ancient smelting area'.value: '003'},
              {name:'Open area'.value: '004'},
              {name:'Fung Nan District'.value: '005'},
              {name:'Fertile zone'.value: '006'},
              {name:'luan county'.value: '007'},
              {name:'Luannan County'.value: '008'},].'qinhuangdao': ['Harbour area'].'handan': ['Handan District'].'xingtai': ['Bridge East'].'baoding': ['Competition Area'].'taiyuan': ['Shop area'].'datong': ['the city'].'yangquan': ['mine'].'changzhi': [Changzhi County].'jincheng': ['the city'].'shuozhou': ['SCH 'eng District'].'jinzhong': ['Yuci District'].'yuncheng': ['Salt Lake District'.'Linyi'.'Wan Wing District'].'linfen': [{name:'the city'}, {name:'the ancient county'.disabled: true}],},className: 'column2'}]}; }};Copy the code

Tabular data format

Single-column data format

// data
['hangzhou'.'ningbo'.'the city of wenzhou]

// Or use the form name => value. If value is not set, the default value is the array index[{name: 'hangzhou'.value: 'city01'.disabled: true },
  { name: 'ningbo'.value: 'city02'  },
  { name: 'the city of wenzhou.value: 'city03'.disabled: true},]Copy the code

Multi-column data format

Keys data corresponds to a list data

// Ajax asynchronous dynamic data[{keys: ['zhejiang'.'tianjin'.'hebei'.'the shanxi'].className: 'column1'
  },
  { 
    keys: [{ name: 'hangzhou' }, { name: 'ningbo'.disabled: true  }, { name: 'the city of wenzhou}}]]// Or parent-child linkage data[{keys: [{name:'Beijing'.value: 'cn001'},
      {name:'tianjin'.value: 'cn002'},
      {name:'hebei'.value: 'cn003'},
      {name:'the shanxi'.value: 'cn004'},].className: 'column1'
  },
  {
    keys: {
      'cn001': [{name:'Beijing'.value: 'beijing'}].'cn002': [{name:Tianjin City.value: 'tianjing'.disabled: true},].'cn003': [{name:'Shijiazhuang'.value: 'shijiazhuang'},
        {name:'Tangshan'.value: 'tangshan'},
        {name:'Qinhuangdao'.value: 'qinhuangdao'},
        {name:'Handan city'.value: 'handan'},
        {name:'Xingtai'.value: 'xingtai'},
        {name:'Baoding'.value: 'baoding'},].'cn004': [{name:'Taiyuan'.value: 'taiyuan'},
        {name:'Datong'.value: 'datong'},
        {name:'Yangquan'.value: 'yangquan'},
        {name:'Changzhi city'.value: 'changzhi'},
        {name:'Jincheng'.value: 'jincheng'},
        {name:'Shuozhou'.value: 'shuozhou'},
        {name:Jinzhong city.value: 'jinzhong'},
        {name:'Transport city'.value: 'yuncheng'},
        {name:'Linfen'.value: 'linfen'}},],className: 'column2'
  },
  {
    keys: {
      'beijing': [{name:'Dongcheng District'.value: 'city001'},
        {name:'West Town'.value: 'city002'},
        {name:'Chaoyang district'.value: 'city003'},
        {name:'Fengtai District'.value: 'city004'},
        {name:'Stoneview Mountain'.value: 'city005'},
        {name:'Haidian District'.value: 'city006'},].'tianjing': [{name:'Zone of Peace'.value: '1city'},
        {name:East Riverside.value: '2city'},
        {name:Hexi District.value: '3city'},].'shijiazhuang': [{name:'Chang 'an District'.value: 'changan'}].'tangshan': [{name:'Lunan District'.value: '001'},
        {name:'Lu Bei district'.value: '002'},
        {name:'Ancient smelting area'.value: '003'},
        {name:'Open area'.value: '004'},
        {name:'Fung Nan District'.value: '005'},
        {name:'Fertile zone'.value: '006'},
        {name:'luan county'.value: '007'},
        {name:'Luannan County'.value: '008'},].'qinhuangdao': ['Harbour area'].'handan': ['Handan District'].'xingtai': ['Bridge East'].'baoding': ['Competition Area'].'taiyuan': ['Shop area'].'datong': ['the city'].'yangquan': ['mine'].'changzhi': [Changzhi County].'jincheng': ['the city'].'shuozhou': ['SCH 'eng District'].'jinzhong': ['Yuci District'].'yuncheng': ['Salt Lake District'.'Linyi'.'Wan Wing District'].'linfen': [{name:'the city'}, {name:'the ancient county'.disabled: true}],},className: 'column3'}]Copy the code

Loading status

When Picker data is retrieved asynchronously, loading prompts can be displayed with the loading property

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

Customize presentation options

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

import icon from './assets/tui.png'

export default {
  data() {
    return {
      values: [1].columns: [{name: 'ningbo'},
        {name: `<img src="${icon}"Class ="y-custom-icon"},
        {name: 'the city of wenzhou},
        {name: '嘉兴'},
        {name: 'the huzhou'}}},methods: {
    onConfirm (text, value, index, disabled) {
      this.values = value
      console.log('Current value:${text}, current index:${index}`);
    },
    onCancel() {
      console.log('cancel'); }}};Copy the code

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

Datetime Picker code demo

Basic usage

Type Specifies the 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"/>
Copy the code

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('Current value:${text.join(', ')}, current value:${value.join(', ')}, current index:${index.join(', ')}`); }}};Copy the code

Select years

Option text is processed by passing in the formatter function

<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"/>
Copy the code

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}Years `
      } else if (type === 'month') {
        return `${value}Month `
      }
      return value
    },
    onConfirm (text, value, index) {
      this.currentDate = value
      console.log('Current value:${text.join(', ')}, current value:${value.join(', ')}, current index:${index.join(', ')}`); }}};Copy the code

To choose time

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

export default {
  data() {
    return {
      currentTime: '12:30'.minHour: 10.maxHour: 30}},methods: {
    onConfirm (text, value, index) {
      this.currentDate = value
      console.log('Current value:${text.join(', ')}, current value:${value.join(', ')}, current index:${index.join(', ')}`); }}};Copy the code

API

Generic API

Ordinary Picker apis

datetime Picker API

Event

Columns data structure

When multiple columns of data are passed in, columns are an array of objects. Each object in the array is configured with each column, and each column has the following key

methods

The ref gets the picker instance and calls the instance method

Thank you for browsing ~, the first article welcome you to exchange ~ ~