-
-
+
@@ -248,23 +261,36 @@
-
{{
- t("tvp.tvpSearchbox.tagKey")
- }}
-
{{
- t("tvp.tvpSearchbox.tagValue")
- }}
-
- {{ item.label }}
-
+
{{
+ t("tvp.tvpSearchbox.tagKey")
+ }}
+
{{
+ t("tvp.tvpSearchbox.tagValue")
+ }}
+
+
+
+ {{ item.label }}
+
+
+
+
@@ -283,10 +309,11 @@ import {
TinyLoading
} from '@opentiny/vue'
import { t } from '../utils/i18n.ts'
+import { useVirtualScroll } from '../composables/use-virtual-scroll.ts'
// 简单的 renderless 函数
-const renderless = (props, hooks, { emit }) => {
- const { computed } = hooks
+const renderless = (props, hooks, { emit, nextTick, refs }) => {
+ const { computed, reactive, watch, onMounted } = hooks
// 优先使用传入的 events/handleEvents 函数，如果没有则使用 emit
const handleEvents = props.handleEvents || props.events || ((eventName, p1, p2) => {
@@ -329,6 +356,71 @@ const renderless = (props, hooks, { emit }) => {
return props.state.backupList?.find((item) => !item.isFilter)
})
+ // 虚拟滚动：根据当前类型计算过滤后的列表
+ const currentFilteredList = computed(() => {
+ const type = props.state.prevItem.type
+ const backupList = props.state.backupList || []
+
+ // radio 类型无输入时显示全部
+ if (!type || type === 'radio') {
+ if (!props.state.inputValue) return backupList
+ return backupList.filter((item) => !item.isFilter)
+ }
+
+ // checkbox 和 map 始终过滤 isFilter
+ return backupList.filter((item) => !item.isFilter)
+ })
+
+ const vs = useVirtualScroll(
+ { reactive, computed },
+ {
+ getList: () => currentFilteredList.value,
+ itemHeight: 32,
+ bufferSize: 5,
+ headerHeight: () => {
+ const type = props.state.prevItem.type
+ // checkbox 的"全选"和 map 的标题在滚动容器内，占 32px
+ if (type === 'checkbox' || type === 'map') return 32
+ return 0
+ }
+ }
+ )
+
+ // 输入变化时重置滚动位置
+ watch(
+ () => props.state.inputValue,
+ () => {
+ vs.vsState.scrollTop = 0
+ nextTick(() => {
+ if (refs.vsScrollEl) {
+ refs.vsScrollEl.scrollTop = 0
+ }
+ })
+ }
+ )
+
+ // 切换面板类型时重置滚动位置并重新测量视口高度
+ watch(
+ () => props.state.prevItem,
+ () => {
+ vs.vsState.scrollTop = 0
+ nextTick(() => {
+ if (refs.vsScrollEl) {
+ refs.vsScrollEl.scrollTop = 0
+ vs.handleScroll({ target: refs.vsScrollEl })
+ }
+ })
+ },
+ { deep: true }
+ )
+
+ // 挂载后测量实际视口高度，确保首次渲染数量正确
+ onMounted(() => {
+ if (refs.vsScrollEl) {
+ vs.handleScroll({ target: refs.vsScrollEl })
+ }
+ })
+
return {
setOperator,
selectRadioItem,
@@ -339,6 +431,11 @@ const renderless = (props, hooks, { emit }) => {
handleDateShow,
isLoading,
showCheckBoxList,
+ vsTotalHeight: vs.totalHeight,
+ vsStartIndex: vs.startIndex,
+ vsOffsetY: vs.offsetY,
+ vsVisibleItems: vs.visibleItems,
+ vsHandleScroll: vs.handleScroll,
t
}
}
@@ -353,6 +450,11 @@ const api = [
'handleDateShow',
'isLoading',
'showCheckBoxList',
+ 'vsTotalHeight',
+ 'vsStartIndex',
+ 'vsOffsetY',
+ 'vsVisibleItems',
+ 'vsHandleScroll',
't'
]
@@ -391,6 +493,10 @@ export default defineComponent({
type: Function,
default: null
},
+ panelMaxHeight: {
+ type: String,
+ default: '999px'
+ }
},
setup(props, context) {
return setup({ props, context, renderless, api })
diff --git a/packages/search-box/src/composables/use-virtual-scroll.ts b/packages/search-box/src/composables/use-virtual-scroll.ts
new file mode 100644
index 0000000..1a38ef2
--- /dev/null
+++ b/packages/search-box/src/composables/use-virtual-scroll.ts
@@ -0,0 +1,57 @@
+/**
+ * 轻量级一维列表虚拟滚动 composable
+ * 适用于固定行高的下拉列表场景
+ *
+ * @param hooks - renderless hooks (提供 reactive, computed)
+ * @param options.getList - 返回完整列表的函数
+ * @param options.itemHeight - 每行高度（默认 32px，与 tiny-dropdown-item 一致）
+ * @param options.bufferSize - 视口外额外渲染的行数（默认 5）
+ * @param options.headerHeight - 返回容器内非列表头部高度的函数（默认 () => 0）
+ */
+export function useVirtualScroll(hooks, options) {
+ const { reactive, computed } = hooks
+ const { getList, itemHeight = 32, bufferSize = 5, headerHeight = () => 0 } = options
+
+ const vsState = reactive({
+ scrollTop: 0,
+ viewportHeight: 300
+ })
+
+ const totalHeight = computed(() => {
+ const list = getList() || []
+ return list.length * itemHeight
+ })
+
+ const startIndex = computed(() => {
+ const adjustedScrollTop = Math.max(0, vsState.scrollTop - headerHeight())
+ return Math.max(0, Math.floor(adjustedScrollTop / itemHeight) - bufferSize)
+ })
+
+ const endIndex = computed(() => {
+ const list = getList() || []
+ const visibleCount = Math.ceil(vsState.viewportHeight / itemHeight)
+ return Math.min(list.length, startIndex.value + visibleCount + bufferSize * 2)
+ })
+
+ const offsetY = computed(() => startIndex.value * itemHeight)
+
+ const visibleItems = computed(() => {
+ const list = getList() || []
+ return list.slice(startIndex.value, endIndex.value)
+ })
+
+ const handleScroll = (e) => {
+ vsState.scrollTop = e.target.scrollTop
+ vsState.viewportHeight = e.target.clientHeight
+ }
+
+ return {
+ vsState,
+ totalHeight,
+ startIndex,
+ endIndex,
+ offsetY,
+ visibleItems,
+ handleScroll
+ }
+}
diff --git a/packages/search-box/src/pc.vue b/packages/search-box/src/pc.vue
index 985c3e9..623cf72 100644
--- a/packages/search-box/src/pc.vue
+++ b/packages/search-box/src/pc.vue
@@ -141,6 +141,7 @@
v-else-if="state.prevItem.type !== 'custom'"
:state="state"
:picker-options="pickerOptions"
+ :panel-max-height="panelMaxHeight"
@events="handleEvents"
>