更新
This commit is contained in:
hero920103 committed
1 parent
5718a00e31
commit
1850ac640e
226 files changed
+37772
-12071
No files matched your search
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view v-if="show" class="picker-mask" @tap="close">
|
||||
<view class="picker-sheet" @tap.stop>
|
||||
<view class="sheet-head">
|
||||
<text class="sheet-title">{{ title }}</text>
|
||||
<text class="sheet-close" @tap="close">关闭</text>
|
||||
</view>
|
||||
|
||||
<view class="sheet-search">
|
||||
<FaIcon name="magnifying-glass" color="#94a3b8" :size="15" />
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="search-input"
|
||||
:placeholder="placeholder"
|
||||
confirm-type="search"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<scroll-view class="sheet-body" scroll-y :show-scrollbar="false">
|
||||
<text v-if="tip" class="sheet-tip">{{ tip }}</text>
|
||||
<view v-if="loading" class="sheet-empty">
|
||||
<text>搜索中...</text>
|
||||
</view>
|
||||
<view v-else-if="!filtered.length" class="sheet-empty">
|
||||
<text>没有匹配项</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="opt in filtered"
|
||||
:key="String(opt.value)"
|
||||
class="option-row"
|
||||
:class="{ active: String(opt.value) === String(modelValue) }"
|
||||
@tap="choose(opt)"
|
||||
>
|
||||
<view class="option-main">
|
||||
<text class="option-label">{{ opt.label }}</text>
|
||||
<text v-if="opt.sub" class="option-sub">{{ opt.sub }}</text>
|
||||
</view>
|
||||
<text v-if="opt.extra" class="option-extra">{{ opt.extra }}</text>
|
||||
<FaIcon
|
||||
v-if="String(opt.value) === String(modelValue)"
|
||||
name="check"
|
||||
color="#2563eb"
|
||||
:size="16"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 移动端通用底部选择器（单选）。
|
||||
* 单据开单要选商品/仓库/客商/审批流，选项动辄上千条，
|
||||
* 原生 picker 无法搜索，这里统一用「搜索 + 列表 + 点选即回填」的抽屉。
|
||||
* 默认本地过滤；数据量大时传 remote 并监听 search，由页面做服务端搜索。
|
||||
*/
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import FaIcon from '@/components/FaIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
title: { type: String, default: '请选择' },
|
||||
placeholder: { type: String, default: '搜索' },
|
||||
options: { type: Array, default: () => [] },
|
||||
/** 当前选中值，用于高亮（可选） */
|
||||
modelValue: { type: [String, Number, null], default: null },
|
||||
/** 服务端搜索：关键字变化时向外抛 search，不在本地过滤 */
|
||||
remote: { type: Boolean, default: false },
|
||||
loading: { type: Boolean, default: false },
|
||||
/** 列表顶部提示（如「仅显示前 50 条」） */
|
||||
tip: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:show', 'select', 'search'])
|
||||
|
||||
const keyword = ref('')
|
||||
|
||||
let searchTimer = null
|
||||
watch(keyword, (val) => {
|
||||
if (!props.remote) return
|
||||
clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => emit('search', val.trim()), 300)
|
||||
})
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (props.remote) return props.options
|
||||
const kw = keyword.value.trim().toLowerCase()
|
||||
if (!kw) return props.options
|
||||
return props.options.filter(
|
||||
(opt) =>
|
||||
String(opt.label || '').toLowerCase().includes(kw) ||
|
||||
String(opt.sub || '').toLowerCase().includes(kw)
|
||||
)
|
||||
})
|
||||
|
||||
function choose(opt) {
|
||||
emit('select', opt)
|
||||
close()
|
||||
}
|
||||
|
||||
function close() {
|
||||
clearTimeout(searchTimer)
|
||||
keyword.value = ''
|
||||
emit('update:show', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/src/styles/page-common.scss';
|
||||
|
||||
.picker-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
z-index: 998;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@include mask-responsive;
|
||||
}
|
||||
|
||||
.picker-sheet {
|
||||
width: 100%;
|
||||
max-height: 76vh;
|
||||
background: $color-card;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
@include sheet-responsive;
|
||||
}
|
||||
|
||||
.sheet-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx $page-padding-x 12rpx;
|
||||
}
|
||||
|
||||
.sheet-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.sheet-close {
|
||||
font-size: 26rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.sheet-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin: 0 $page-padding-x 12rpx;
|
||||
height: 66rpx;
|
||||
padding: 0 22rpx;
|
||||
background: $color-bg-page;
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.sheet-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: 52vh;
|
||||
padding: 0 $page-padding-x 20rpx;
|
||||
/* scroll-view 默认 content-box，加左右内边距会把内容顶出屏幕右侧 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sheet-tip {
|
||||
display: block;
|
||||
padding: 8rpx 4rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.sheet-empty {
|
||||
padding: 80rpx 0;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 20rpx;
|
||||
border-radius: $radius-md;
|
||||
|
||||
&:active {
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $color-primary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.option-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.option-sub {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: 23rpx;
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.option-extra {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user