uni-app colorui组件总结二
picker
普通选择器
先看官网上 picker对value的描述
value 的值表示选择了 range 中的第几个(下标从 0 开始)
所以value是index
直接使用picker
html
<view class="cu-form-group">
<view class="title">0表示男,1表示女 性别1:sex1==={{item.sex1}}</view>
<picker @change="sexSelect1" :value="item.sex1" :range="sexList1">
<view class="picker">{{ sexList1[item.sex1] ? sexList1[item.sex1] : '请选择' }}</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">F表示男,M表示女性别2:sex2==={{item.sex2}}</view>
<picker @change="sexSelect2" :range="sexList2" :range-key="'label'">
<view class="picker">{{ sexList2[sexindex2] ? sexList2[sexindex2].label : '请选择' }}</view>
</picker>
</view>
data
item:{
sex1:0,
sex2:'F',
},
sexindex1:-1,
sexindex2:-1,
sexList1:['男','女'],
sexList2:[{
value:'F',
label:'男'
},
{
value:'M',
label:'女'
}],
js
onLoad(option) {
//遍历当前性别的数组,根据传回的值和数组里的value对比
this.sexList2.forEach((item, index) => {
if (item.value == this.item.sex2) {
this.sexindex2 = index;
}
});
},
methods: {
sexSelect1(e){
this.item.sex1 = e.detail.value;
},
sexSelect2(e){
this.sexindex2 = e.detail.value;
this.item.sex2= this.sexList2[this.sexindex2].value;
}
}
效果
自定义picker组件
直接贴代码
<template>
<view class="i-select">
<picker class="i-picker" @change="change" :value="index" :range="labelArray">
<view> {{labelArray[index]?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() {
if(this.options.length>0&&!this.options[1].label){
this.labelArray.push('请选择')
this.valueArr.push(null)
}
this.options.forEach(v => {
if(v['label']){
this.labelArray.push(v['label'])
this.valueArr.push(v['value'])
}else{
this.labelArray.push(v)
this.valueArr.push(v)
}
})
this.index = this.valueArr.findIndex(val => val === this.value)
},
data() {
return {
index: 0,
labelArray: [],
valueArr: []
}
},
computed: {},
methods: {
change(e) {
this.$emit('pickerChange', e)
}
}
}
</script>
<style lang="less">
.i-select{
flex:1;
display: flex;
height: 100upx;
align-items: center;
border-radius: 5upx;
padding-left:10upx;
.i-picker{
width: 100%;
height: 100%;
color: #000;
line-height: 100upx;
text-align: right;
}
}
</style>
使用方法
html
<view class="cu-form-group">
<view class="title">性别3:sex3==={{item.sex3}}</view>
<my-prcker v-model="item.sex3" :options='sexList3'></my-prcker>
</view>
<view class="cu-form-group">
<view class="title">性别3:sex4==={{item.sex4}}</view>
<my-prcker v-model="item.sex4" :options='sexList4'></my-prcker>
</view>
date
item:{
sex3:'女',
sex4:"F"
},
sexList4:[{
value:'F',
label:'男'
},
{
value:'M',
label:'女'
}],
sexList3:['男','女'],
引入组件 单页面
import myPrcker from "../component/my_picker.vue"
export default {
components:{
myPrcker
}
......
引入组件公共
import myPrcker from './pages/component/my_picker.vue'
Vue.component('my-prcker', myPrcker)
findIndex()方法
哪里写的不好,欢迎大家提建议