2.0.0 • Published 8 years ago

mint-picker v2.0.0

Weekly downloads
4
License
MIT
Repository
github
Last release
8 years ago

Overview

vue-picker is a multi-slot picker based on vue.js.

Install

npm install vue-picker --save
require ('mint-picker/lib/index.css');

// ES6 mudule
import Picker from 'mint-picker';

// CommonJS
const Picker = require('mint-picker').default;

Register component:

Vue.component('picker', Picker);

Usage

<picker :slots="slots" @change="onValuesChange" rotate-effect :visible-item-count="3">
   <!-- Toolbar items -->
  <button>confirm</button>
  <button>cancel</button>
</picker>
export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },

  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

Options

Picker Options:

OptionDescription
slotsArray(default: []) the slot config of picker.
showToolbarBoolean(default: false) show a toolbar on top of picker when showToolbar is true.
visibleItemCountNumber(default: 5) visible item count of each slot.
rotateEffectBoolean(default: false) use rotate effect on picker item when rotateEffect is true.

Picker Methods:

  • getSlotValue(index): get the value of specific slot.
  • setSlotValue(index, value): set the value of specific slot.
  • getSlotValues(index): get the values of specific slot.
  • setSlotValues(index, values): set the values of specific slot.
  • getValues(): values of all slots except divider slots.
  • setValues(values): set values(Array) of all slots except divider slots.

Picker Slot Options:

OptionDescription
dividerBoolean(default: false) - just a divider slot when divider is true.
contentString - text content in divider slot.
valuesvalues of this slot.
textAligntext align of this slot's item.
flexthe style.flex value of this slot.
classNameclassName of this slot.

License

MIT

2.0.0

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago