我正在用Vue、Nuxt和vuetify编写一个项目,作为UI库.
在我的索引页面中,我必须用幻灯片和 carousel 显示许多静态内容和图像.我已经对它进行了编码,除了我的索引之外,一切都很好.页面目录中的vue文件看起来很凌乱,我觉得里面的代码行太多了.
例如,我有以下代码用于在index.vue中显示 carousel :
<v-carousel
height="90vh"
vertical
vertical-delimiters="right"
interval="9000"
cycle
:show-arrows="false"
hide-delimiter-background
>
<v-carousel-item
v-for="(item,i) in carouselItems" :key="i"
:src="item.src"
reverse-transition="scroll-y-transition"
transition="scroll-y-transition"
>
<div
class="d-flex transition-fade-in white--text"
style="height: 100%;background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9));"
>
<v-row
class="fill-height pb-9 mx-5 flex-column"
align="start"
justify="end"
>
<div class="text-h3 white--text d-block mb-2">
{{ item.title }}
</div>
<div class="text-h6 white--text mx-1 text-justify"> {{ item.description }} </div>
</v-row>
</div>
</v-carousel-item>
</v-carousel>
现在我的问题是,我应该将这些代码分离成一个组件,并将选项和项目作为props 传递给该组件,还是应该保持原样,让一个页面组件包含多行代码?