javascript - 使用 vue-virtual-scroller 时 content-tag 和 main-tag 来自哪里

Question

我正在尝试了解 vue 虚拟滚动条。我在演示中注意到它使用了几个 HTML 属性...

<virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">

链接到源代码上的特定行

这种能力从何而来，它的文档在哪里？

Answer 1

分解：

• v-if- vue 指令
• class- 您可能已经知道的普通 html 属性。
• item-height-计算方法。
• items-数据对象属性。
• buffer-数据对象属性
• pool-size-数据对象属性

请注意item-heightexamplekebab-case在 html 端写成，但在 javascript 端应该用 camelCase 写。像这样：itemHeight

关于content-tag, main-tag- 值得一试在 github 上询问开发人员。这些不是官方 vue api 的一部分，也不是 html 规范的一部分。

Answer 2

这些是在 ../src/components/VirtualScroller.vue 中声明的道具。

“content-tag”和“main-tag”都是 String 类型的 props，这意味着您可以传递您选择的 html 元素。在您复制的示例中，“section”和“table”被传递给每个道具，这只是一个字符串。如果未传递任何值，则默认为“div”，在此处设置：https ://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/VirtualScroller.vue

字符串也可以动态传递，就像它们对 :item-height="itemHeight" 所做的那样，您将拥有 :main-tag="mainTag" 或 :main-tag="anyCustomMainTag"。这将允许您将 mainTag 或 anyCustomMainTag 设置为您的字符串值，这也将覆盖默认 div。