真实动态行高与内容更新复现输入

真实动态行高与内容更新

固定依赖 2.14.7 下，此输入首次挂载会出现渲染无响应；动态行高、内容更新和滚动运行尚未通过验证。这里保留完整 TS/JS 复现源码，固定行高的可运行用法见 virtual / layout 示例。返回组件文档；选择下方 TS/JS 后下载 Demo.vue。

vue

<template>
	<div class="example">
		<AsamSelectV2
			v-model="selected"
			:options="options"
			:estimated-option-height="40"
			:height="180"
			:fit-input-width="420"
			filterable
			aria-label="可变行高选项"
			@end-reached="direction = $event"
		>
			<template #default="{ item, index }"
				><div
					:style="{
						minHeight: index % 2 ? (tall ? '96px' : '64px') : '32px',
						whiteSpace: 'normal',
						lineHeight: '20px'
					}"
				>
					{{ item?.label }}
				</div></template
			>
		</AsamSelectV2>
		<AsamButton type="default" @click="tall = !tall">切换实际内容高度</AsamButton>
		<output>选择：{{ selected }}；方向：{{ direction }}</output>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
const options = Array.from({ length: 100 }, (_, value) => ({
	value,
	label: '动态选项 ' + value,
	raw: { value }
}));
const selected = ref<number | null>(null);
const tall = ref(false);
const direction = ref('');
defineOptions({ name: 'AsamSelectV2DynamicDemo' });
</script>
<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
}
</style>

vue

<template>
	<div class="example">
		<AsamSelectV2
			v-model="selected"
			:options="options"
			:estimated-option-height="40"
			:height="180"
			:fit-input-width="420"
			filterable
			aria-label="可变行高选项"
			@end-reached="direction = $event"
		>
			<template #default="{ item, index }"
				><div
					:style="{
						minHeight: index % 2 ? (tall ? '96px' : '64px') : '32px',
						whiteSpace: 'normal',
						lineHeight: '20px'
					}"
				>
					{{ item?.label }}
				</div></template
			>
		</AsamSelectV2>
		<AsamButton type="default" @click="tall = !tall">切换实际内容高度</AsamButton>
		<output>选择：{{ selected }}；方向：{{ direction }}</output>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSelectV2, AsamButton } from '@asam-ui/ui';
const options = Array.from({ length: 100 }, (_, value) => ({
	value,
	label: '动态选项 ' + value,
	raw: { value }
}));
const selected = ref(null);
const tall = ref(false);
const direction = ref('');
defineOptions({ name: 'AsamSelectV2DynamicDemo' });
</script>
<style scoped>
.example {
	display: grid;
	gap: var(--asam-space-md, 16px);
}
</style>