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>