82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="list-wrapper">
|
|
<view class="search-input">
|
|
<input
|
|
focus
|
|
v-model="searchText"
|
|
placeholder="请输入银行名称"
|
|
@input="filerBank"
|
|
/>
|
|
</view>
|
|
<view class="list-mian">
|
|
<view
|
|
class="list-item"
|
|
v-for="v in filerBank()"
|
|
:key="v[key]"
|
|
@tap="choice(v)"
|
|
>
|
|
{{ v[value] }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const props = defineProps({
|
|
key: {
|
|
type: String,
|
|
},
|
|
value: {
|
|
type: String,
|
|
},
|
|
list: {
|
|
type: Array,
|
|
},
|
|
});
|
|
const emits = defineEmits(["choiceValue"]);
|
|
const popup = ref();
|
|
const open = () => {
|
|
popup.value.open();
|
|
};
|
|
const searchText = ref("");
|
|
const filerBank = () => {
|
|
return props.list.filter((v) => v[props.value].includes(searchText.value));
|
|
};
|
|
const choice = (val) => {
|
|
emits("choiceValue", val);
|
|
popup.value.close();
|
|
};
|
|
defineExpose({ open });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
background-color: #fff;
|
|
max-height: 1000rpx;
|
|
padding: 30rpx;
|
|
.search-input {
|
|
input {
|
|
border-bottom: 1px solid #ccc;
|
|
text-indent: 1rem;
|
|
padding: 10rpx 0;
|
|
}
|
|
}
|
|
.list-mian {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
margin-top: 20rpx;
|
|
.list-item {
|
|
margin: 10rpx 0;
|
|
padding: 10rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|