<template>
<view class="container">
<u-popup :maskCloseAble="maskCloseAble" mode="bottom" v-model="show" height="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="10000">
<view class="af-select">
<view class="af-select__header" @touchmove.stop.prevent="">
<view
class="af-select__header__cancel af-select__header__btn"
hover-class="af-hover-class"
:hover-stay-time="150"
@tap="getResult('cancel')"
>
取消
</view>
<view class="af-select__header__search">
<u-search placeholder="请输入" @change="textChange" :show-action="false" v-model="keyword"></u-search>
</view>
<view
class="af-select__header__confirm af-select__header__btn"
hover-class="u-hover-class"
:hover-stay-time="150"
@touchmove.stop=""
@tap.stop="getResult('confirm')"
>
确定
</view>
</view>
<view class="af-select__body">
<picker-view @change="columnChange" class="af-select__body__picker-view" :value="defaultSelector" v-if="show">
<picker-view-column>
<view class="af-select__body__picker-view__item" v-for="(item, index) in columnData" :key="index">
<view class="u-line-1">{{ item.label }}</view>
</view>
</picker-view-column>
</picker-view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
name:"af-select",
props: {
list: {
type: Array,
default: []
},
maskCloseAble: {
type: Boolean,
default: true
},
safeAreaInsetBottom: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: false
}
},
watch: {
list: {
handler(newVal) {
console.log(newVal);
this.list = newVal
this.columnData = newVal
}
}
},
data() {
return {
keyword: '',
columnData: [],
defaultSelector: [0]
}
},
methods: {
columnChange(e) {
},
getResult(res) {
console.log(this.columnData[this.defaultSelector[0]]);
// this.$emit('confirm', this.columnData[this.defaultSelector[0]])
},
close() {
},
textChange() {
this.columnData = this.list.filter(item => item.label.includes(this.keyword))
}
}
}
</script>
<style lang="scss" scoped>
.container {
.af-select {
padding: 5px;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
&__btn {
margin: 0 5px;
}
&__search {
flex: 1;
}
}
&__body {
width: 100%;
height: 500rpx;
overflow: hidden;
background-color: #fff;
&__picker-view {
height: 100%;
box-sizing: border-box;
&__item {
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
padding: 0 8rpx;
}
}
}
}
}
</style>
![1***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/58696916ce30d3c66f9dce89d1ae9ad7.png)
- 发布:2024-03-25 16:44
- 更新:2025-01-06 14:15
- 阅读:269
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22H2
HBuilderX类型: 正式
HBuilderX版本号: 3.99
手机系统: Android
手机系统版本号: Android 11
手机厂商: 小米
手机机型: Redmi 10A
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
1、弹出popup,使input处于焦点状态。
2、收起手机键盘,滑动或点击picker-view
3、键盘重新弹出
1、弹出popup,使input处于焦点状态。
2、收起手机键盘,滑动或点击picker-view
3、键盘重新弹出
预期结果:
滑动或点击后键盘不弹出
滑动或点击后键盘不弹出
实际结果:
手机键盘重新弹出
手机键盘重新弹出
bug描述:
picker-view在滚动或者被点击后input框如果处于有焦点状态会自动弹出手机键盘
2 个回复
喜欢技术的前端 - QQ---445849201
可以给个完整的demo看看
3***@qq.com
解决了吗?我也遇到这个问题了