定高虚拟列表组件（可自定义内容）

组件属性

• 总列表数据：ListData
• 显示 DOM 节点总数量：DomHeight，示例：'50px'
• 单个 DOM 的高度：DomNumber，示例：'10' 或者 10
• 可视区高度：height，示例：'100px'

props 结构

const props = defineProps({
  // 总数据
  ListData: {
    type: Array,
    default: []
  },
  // 节点高度
  DomHeight: {
    type: String,
    default: '50px'
  },
  // 节点数量
  DomNumber: {
    type: [String, Number],
    default: 10
  },
  // 可视区高度
  height: {
    type: String,
    default: '100px'
  }
})

使用示例

示例一

<SameHeightList :ListData="listData" height="500px" DomHeight="50px" v-slot="slotProps">
  <!-- 自定义内容 -->
  <div>{{ slotProps.item.value }}</div>
</SameHeightList>

示例二

<SameHeightList :ListData="listData" height="500px" DomHeight="50px" v-slot="{item}">
  <!-- 自定义内容 -->
  <div>{{ item.value }}</div>
</SameHeightList>