uView 封装 Select
项目使用uniapp+hbuilder 开发微信小程序,为了实现滚动加载数据,选择了uView,结果使用中发现了一些问题。
由于uView没有现成的select下拉菜单,只能自己封装使用。
使用效果
数据格式
list:[
{
value:'',
label:''
}
]
使用说明
将组件代码以Select.vue 命名,放置于components目录下的Select下,这样命名后,系统在任意页面都可以找到这个组件
组件调用
在表单item内调用,初始化list数据
<u-form-item label="活动标签" prop="activityLabel" required>
<Select v-model="form.activityLabel" :list="dictActivityLabel" placeholder="请选择活动标签"></Select>
</u-form-item>
组件代码
<!--
下拉选择
list:[
{
value:'',
label:''
}
]
-->
<template>
<view class="select" @click="show=true">
<view v-if="!label" class="placeholder u-line-1" :style="{color:placeholderColor}">{{_placeholder}}</view>
<view v-else class="u-line-1" >{{_placeholder}}</view>
<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm" @change="confirm" :default-value="selectDefault"></u-select>
<u-icon name="arrow-down-fill" :color="label?'#2b2b2b':'#828282'" size="24" class="u-m-l-10"></u-icon>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
label: '',
selectDefault:[]
}
},
props: {
placeholderColor:{
type:String
},
className:{
type:String
},
placeholder: {
type: String,
default: '请选择'
},
value: {
type: null
},
list: {
type: Array
}
},
computed: {
_placeholder() {
return this.label ? this.label : this.placeholder
},
},
watch: {
value(val) {
//console.log('11111111',val)
},
list(dictList) {
//根据value来回显数据
let curValue = this.value
let that = this
dictList.forEach(function (item, index) {
if(item.value == curValue+''){
that.label = item.label
that.$emit("input", item.value);
that.selectDefault[0] = index
}
});
}
},
methods: {
confirm(e) {
this.label = e[0].label
this.$emit("input", e[0].value);
this.$emit('change')
}
},
}
</script>
<style lang="scss" scoped>
.select {
display: flex;
font-size: 28rpx;
line-height: 1.5em;
justify-content: space-between;
max-width: 100%;
.placeholder {
color: #C0C4CC;
}
}
</style>