【uniapp】picker-view选择器的使用

前文在picker使用的帖子介绍到, 需要做一个医院下拉选择的一个功能, 因为长久没用, 忘记了picker和picker-view的使用, 因为picker弹框的样式是自带的, 且无法更改样式, 插入到项目很不友好, 于是把组件替换成picker-view

温习下picker的使用~
【uniapp】picker选择器用法 : https://blog.csdn.net/qq_45481971/article/details/129316743?spm=1001.2014.3001.5501

文档 :
https://uniapp.dcloud.net.cn/component/picker-view.html

特别说明: picker和picker-view区别在于, 点击picker即弹出选择器, 而不需要按钮点击来另外控制, 而picker-view可以直接嵌入到页面, 使用起来, picker-view相对更灵活

上代码

				<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;
},