uni-app 二次封装下拉选择组件，实现v-modal数据绑定

1.html结构，直接引用uni-app 自定义的组件

<template>
	<view class="select"
		<uni-data-select :value="value" transfer :localdata="range" @change="change" :clear="clear"></uni-data-select>
	</view>
</template>

2.将需要自定义的属性抛出，由于我这个项目样式统一，就没抛出很多自定义的属性

<script>
	export default  {
		props: {
			// 列表数组
			range: {
				default: [],
				type: Array
			},
			// 选中的值
			value: {
				type: [Number,String],
				default: 0
			},
			// 是否显示清空
			clear: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		
		},
		model: {
			
		},
		methods: {
			change(e) {
				this.$emit('input',e)
				this.$emit('change')
			}
		}
	}
</script>

3.封装下拉框，主要是因为ui设计的样式与uni-app所提供的样式不同点太多所以需要修改许多样式

就需要把他们单独领出来做成公共组件，下面是我所做项目需要的样式，其他需要用的小伙伴可以在这上面进行修改

<style lang="scss" scoped>
	// 下拉框
	::v-deep .uni-select {
			border: 1px !important;
		}
	
	::v-deep .uni-stat__select {
		width: 117.97rpx !important;
		height: 17.19rpx !important;
	}
	::v-deep .uni-select__input-text {
		color: #D1DCE2;
		font-size: 8rpx;
	}
	::v-deep .uni-select__selector {
	    border:  1px solid  #0272e1;
		background-color: #0a2c7e;
	}
	::v-deep .uni-select__selector-item {
		height: 17.19rpx;
		line-height: 17.19rpx;
		font-size: 8rpx;
		border-bottom: 1px solid #76C1FF;
	}
	::v-deep .uni-select__selector-item:active {
		background-color: #0272e1;
	}
	::v-deep .uni-popper__arrow::after {
	    border-bottom-color: #0a2c7e;
	}
	::v-deep .uni-icons {
		font-size: 8.81rpx !important;
	}
	::v-deep .uni-select__selector-scroll {
		max-height: 300rpx !important;
	}
</style>