As mentioned in the previous post on picker, we need to make a function of hospital drop-down selection, because it has been useless for a long time, and I forgot the use of picker and picker-view, because the style of the picker bullet box is self-contained, and the style cannot be changed. Inserting into the project is very unfriendly, so replace the component with picker-view
Review the use of picker~
[uniapp] picker selector usage: https://blog.csdn.net/qq_45481971/article/details/129316743?spm=1001.2014.3001.5501
Documentation:
https://uniapp.dcloud.net.cn/component/picker-view.html
Special Note: The difference between picker and picker-view is that clicking on the picker will pop up the selector, without the need to click a button for additional control, while picker-view can be directly embedded in the page. When used, picker-view is relatively more flexible
upper code
<view class="login-input login-middle-username" @tap="openUnit">
<input placeholder="医院" type="text" disabled="true" v-model="unitText" />
</view>
<!-- 弹框 -->
<u-popup :show="showUnit" :round="10" mode="bottom" :closeable="true" @close="closeUnit" @open="openUnit">
<view style="height: 700rpx">
<h4 style="text-align: center; margin-top: 56rpx; letter-spacing: 5rpx">请选择医院</h4>
<picker-view :indicator-style="indicatorStyle" :value="unitValue" @change="bindChange" class="picker-view">
<picker-view-column>
<view class="item" v-for="(item, index) in unitList" :key="index">{
{ item.name }}</view>
</picker-view-column>
</picker-view>
<view class="act-view-bottom">
<button class="nav-button confirmClass" @click="onClickConfirmUnit">确定</button>
<button class="nav-button" @click="closeUnit">取消</button>
</view>
</view>
</u-popup>
unitValue: [],
showUnit: false,
indexUnit: null,
unitId: null,
unitText: '',
unitList: [{
id:1,
name:"医院1"
},
{
id:1,
name:"医院1"
},
{
id:1,
name:"医院1"
}],
indicatorStyle: `height: 50px;`
bindChange(e) {
const val = e.detail.value[0];
this.indexUnit = val;
},
openUnit() {
this.showUnit = true;
},
closeUnit() {
this.showUnit = false;
},
onClickConfirmUnit() {
this.closeUnit();
this.unitText = this.unitList[this.indexUnit].name;
this.unitId = this.unitList[this.indexUnit].id;
},