vue的picker插件

傷城~ 2022-11-18 13:53 34阅读 0赞

**效果图：**

![20210413154754683.gif][]

**github地址：**

[https://github.com/naihe138/vue-picker][https_github.com_naihe138_vue-picker]

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

**使用方法：**

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

<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;
    					},
    				}
    
    			})

[20210413154754683.gif]: /images/20221022/c206de6e1f6d44b6846f3780e66b2eec.png
[https_github.com_naihe138_vue-picker]: https://github.com/naihe138/vue-picker