uni-app之picker组件封装

忘是亡心i 2022-03-02 03:36 300阅读 0赞

近日接触uni-app框架，有过微信小程序开发经验的小伙伴应该很熟悉，uni-app很多的api与小程序只是相差在前缀(uni-、wx),组件基本一至，但有些组件用起来并不是很方便，所以自己封装了一部分

1.picker单选项组件，上代码

<template>
    	<view class="i-select-two">
    		<picker class='i-picker-two' @change="change" :value="index" :range="labelArray">
    			<view>{
       { labelArray[index] }}</view>
    		</picker>
    	</view>
    </template>
    <script>
    //5+App 支付宝小程序 该组件不支持
    export default {
    	props: {
    		value: {
    			require: true
    		},
    		options: {
    			type: Array,
    			require: true,
    			defalut: []
    		}
    	},
    	watch: {
    		value: {
    			handler(newVal) {
    				this.index = this.valueArr.findIndex(val => val === newVal)
    			}
    			// immediate: true
    		}
    	},
    	mounted() {
    		this.options.forEach(v => {
    			this.labelArray.push(v['label'])
    			this.valueArr.push(v['value'])
    		})
    		this.index = this.valueArr.findIndex(val => val === this.value)
    	},
    	data() {
    		return {
    			index: 0,
    			labelArray: [],
    			valueArr: []
    		}
    	},
    	computed: {},
    	methods: {
    		change(e) {
    			this.$emit('input', this.valueArr[e.target.value])
    		}
    	}
    }
    </script>
    <style lang="scss" scoped>
    @import './iselect.scss';
    </style>

如上，该组件有2个参数，value与options，传参格式如下：

list: [ // list格式
        {
            label: '编号',
    	value: 'sn'
        },
        {
            label: '收货人',
            value: 'consignee'
        },
        {
            label: '地区',
            value: 'areaName'
        },
        {
            label: '地址',
            value: 'address'
        },
        {
            label: '邮编',
            value: 'zipCode'
        },
        {
            label: '电话',
            value: 'phone'
        }
    ],
    
    value: 'sn' // value的值必须对应list中的其中一个value

2. 组件调用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lhbXpoaXpoYW5n_size_16_color_FFFFFF_t_70][]

![20190319165457492.png][]

使用：v-modal绑定的value(组件返回的value), options传入选项list

3.样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lhbXpoaXpoYW5n_size_16_color_FFFFFF_t_70 1][]

第一次写，不喜勿喷，能帮助到你是我最大的快乐，谢谢伙伴们。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lhbXpoaXpoYW5n_size_16_color_FFFFFF_t_70]: /images/20220302/3a1723a320e64abfaf90e6668603a660.png
[20190319165457492.png]: /images/20220302/d27bb3e03501477d8766a877adb7ca49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lhbXpoaXpoYW5n_size_16_color_FFFFFF_t_70 1]: /images/20220302/d73c2a03f9ef44bcade10bf348efe879.png