При использовании vue-virtual-scroller откуда берутся теги содержимого и основной тег

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

Это реквизиты, объявленные в../src/components/VirtualScroller.vue.

И "content-tag", и "main-tag" являются реквизитами типа String, что означает, что вы можете передать свой выбор 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 по умолчанию.

Answer 2

Сломать:

• v-if - Vue директива
• class - обычный атрибут HTML, который вы, вероятно, уже знаете.
• item-height- Расчетный метод.
• items - свойство объекта данных.
• buffer - свойство объекта данных
• pool-size - свойство объекта данных

пожалуйста, обратите внимание, что item-height например написано как kebab-case на стороне html, но должен быть написан с помощью camelCase на стороне javascript. вот так: itemHeight

о content-tag, main-tag Стоит попробовать, чтобы спросить разработчика на GitHub. они не являются частью официального vue api и не являются частью спецификации html.