近日接触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.样式
第一次写,不喜勿喷,能帮助到你是我最大的快乐,谢谢伙伴们。