使用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">

link to the specific line on source code

这种能力来自哪里?它的文档在哪里？

Answer 1

细目：

• v-if - vue directive
• class - normal html属性，您可能已经使用了know.
• item-height- computed Method.
• items - data object property.
• buffer - data object property
• pool-size - data object property

请注意，例如，item-height在HTML端被编写为kebab-case，但在Javascript端应该使用camelCase编写。像这样：itemHeight

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

Answer 2

这些是../src/components/VirtualScroller.vue中声明的属性。

"content-tag“和"main-tag”都是字符串类型的道具，这意味着你可以传递你选择的html元素。在您复制的示例中，"section“和"table”被传递给每个prop，这只是一个字符串。如果没有传递任何值，它将默认为"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。