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>