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

parameter instructions type The default value
show Controls the visibility of the Picker

Use v-Model binding		 Boolean false
values Default display value

You can set the selected value through values		 Array | string | Date []
toolbar Whether to display the top bar Boolean false
title Top bar title String ' '
loading Whether to display the loading status Boolean false
item-height Options are highly Number 44
confirm-button-text Confirm button text String confirm
cancel-button-text Cancel button text String cancel
visible-item-count Number of options visible Number 5

Ordinary Picker apis

parameter instructions type The default value
columns Object array that configures the data to be displayed for each column Array []
value-text The key corresponding to the text in the option object String name
value-key The key corresponding to value in the option object String value

datetime Picker API

parameter instructions type The default value
format Format datetime presentation, no special characters supported String ' '
type Type. The optional value isdatetime date time year-month String datetime
formatter Option text processing, type supportyear month day year-month (type, value) => value -
min-date Optional minimum date Date Ten years ago on January 1st
max-date An optional maximum date Date Ten years later, on December 31
min-hour Optional minimum hour for time type Number 0
max-hour The maximum hour is optional for the time type Number 23
min-minute The minimum time is optional Number 0
max-minute This parameter is optional. This parameter is for the time type Number 59

Event

The event name instructions parameter
close Triggered when the Picker closes Close the callback
confirm Triggered when the finish button is clicked Selected values for all columns, indexes for all column selected values, and disabled status for all column selected values
cancel Triggered when the Cancel button is clicked Selected values for all columns, indexes for all column selected values, and disabled status for all column selected values
change Triggered when options change Picker instance, all column selected values, the index corresponding to the current column, and the disabled state corresponding to all column selected values

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

key instructions
keys The corresponding alternative value in the column
className Add additional for the corresponding columnclass

methods

The ref gets the picker instance and calls the instance method

The method name parameter The return value introduce
getNames – names Gets the selected values for all columns
getValues – values Gets the selected values for all columns
getIndexes – indexes Gets the index for all column selected values
getDisabled – disableds Gets the disabled state corresponding to selected values for all columns
getColumnType ColumnIndex, type (‘getName’, ‘getIndex’) value Gets the selected value/index for the corresponding column
setColumnKeys columnIndex, optionIndex – Sets alternate values for the corresponding column

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