116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<template>
|
|
<uv-popup ref="popup" mode="bottom" custom-style="height: 580rpx;">
|
|
<view class="pickerTitle">
|
|
<view @tap="pickerCancel" style="color: #888;padding: 0 30rpx;">取消</view>
|
|
<!-- @change="handleSearch" -->
|
|
<uv-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="handleSearch" @clickIcon="handleSearch" />
|
|
<view @tap="pickerConfirm" style="color: #007aff;padding: 0 30rpx;">确定</view>
|
|
</view>
|
|
<picker-view :value="pickerIndex" @change="onPickerChange">
|
|
<picker-view-column>
|
|
<view v-for="(item, index) in filteredOptions" :key="index" class="picker-item">
|
|
{{ item[props.nodeKey] }}
|
|
</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
const props = defineProps({
|
|
// 带默认值的数字
|
|
nodeKey: {
|
|
type: String,
|
|
default: "label", // 默认值
|
|
},
|
|
// 自定义验证函数
|
|
options: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
},
|
|
},
|
|
});
|
|
|
|
const filteredOptions = computed(() => {
|
|
if (!keyword.value.trim()) {
|
|
return [...props.options];
|
|
}
|
|
|
|
return props.options.filter(item =>
|
|
item[props.nodeKey].includes(keyword.value)
|
|
);
|
|
// console.log('options 变化:', props.options);
|
|
// return [...props.options]; // 可以添加过滤逻辑
|
|
});
|
|
const emits = defineEmits(['confirm']);
|
|
|
|
// 打开弹窗
|
|
const popup = ref(null)
|
|
const open = () => {
|
|
popup.value.open()
|
|
}
|
|
|
|
const pickerIndex = ref([0]);
|
|
const keyword = ref("")
|
|
|
|
// 选择器值变化
|
|
const onPickerChange = (e) => {
|
|
|
|
pickerIndex.value = e.detail.value;
|
|
};
|
|
// 处理搜索
|
|
const handleSearch = () => {
|
|
// if (!keyword.value) {
|
|
// filteredOptions.value = [...props.options];
|
|
// return;
|
|
// }
|
|
// filteredOptions.value = props.options.filter(item =>
|
|
// item[props.nodeKey].includes(keyword.value)
|
|
// );
|
|
};
|
|
// 关闭弹窗
|
|
const pickerCancel = () => {
|
|
popup.value.close()
|
|
}
|
|
// 确定弹窗
|
|
const pickerConfirm = () => {
|
|
const selectedIndex = pickerIndex.value[0];
|
|
emits('confirm', filteredOptions.value[selectedIndex]);
|
|
popup.value.close()
|
|
}
|
|
|
|
// 显式暴露方法给父组件
|
|
defineExpose({
|
|
open,
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pickerTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 90rpx;
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
|
|
view {
|
|
padding: 0 28rpx;
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
|
|
picker-view {
|
|
height: 100%;
|
|
/* 让 picker-view 填充父容器 */
|
|
}
|
|
|
|
.picker-item {
|
|
line-height: var(--picker-view-column-indicator-height);
|
|
text-align: center;
|
|
}
|
|
</style> |