vue的picker插件

效果图：

 

github地址：

https://github.com/naihe138/vue-picker

项目下载下来之后，执行yarn，yarn run rollup，yarn run build

使用方法：

普通网页开发直接复制项目下的lib/vue-picker.js文件即可直接使用

<script src="../../static/js/utils/vuePicker/vue-picker.js" type="text/javascript"></script>

    <vue-picker :data="heightPickerData"

      :show-toolbar="true"

      @cancel="cancel"

      @confirm="heightConfirm"

      :default-index="heightDefaultIndex"

      :visible.sync="heightPickerVisible"

    ></vue-picker>

	new Vue({
				el: "#question",
				components: {
					
				},
				data: {
					height:'170',
					heightPickerVisible:false,	
				},
				computed:{
					
					heightPickerData(){
						let heights=[];
						for(let i=146; i<=190;i++){
							heights.push({label: i+'',value: i})
						}						
						return [heights]
					},
					heightDefaultIndex(){
						if(this.height){
							let heightIndex = this.getArrayIndex(this.heightPickerData[0],this.height);
							let arr = [];
							arr.push(heightIndex);						
							return arr;	
						}else{
							return [0];
						}
											
					},
				},
				created() {
				},
				methods: {
					//获取元素在数组中的下标
					getArrayIndex(arr, obj){
						var i = arr.length;
						while (i--) {
								if (arr[i].label === obj) {
										return i;
								}
						}
						return -1;
					},
					heightPickerShow(){
						this.heightPickerVisible=true;
					},					
					cancel(){
						console.info("cancel")
					},
					heightConfirm(res){
						console.info("heightConfirm",res)
						this.height = res[0].label;
					},
				}

			})