uni-app之picker组件封装

  近日接触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. 组件调用

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

3.样式

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