我有一个带有四个选项卡的组件。除了第一个选项卡之外,所有选项卡都包含大量文本字段,渲染组件需要几秒钟的时间。我想在用户单击选项卡时显示一个带有进度条的对话框,并在选项卡打开时隐藏它。
<v-dialog v-model="showLoading" persistent width="300">
<v-card color="primary" dark>
<v-card-text>
Loading...
<v-progress-linear indeterminate color="white" height="5" class="mt-1 mb-0"></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
<v-card>
<v-tabs
v-model="tab"
background-color="primary"
dark
>
<v-tab
v-for="item in items"
:key="item.tab"
>
{{ item.tab }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item
v-for="item in items"
:key="item.tab"
>
<v-card flat>
<v-card-text v-if="item.tab == 'One'">{{ item.content }}</v-card-text>
<v-card-text v-else>
<v-text-field v-for="i in 1000"></v-text-field>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
我制作了一个 codepen,您可以在其中找到选项卡和对话框。如何在用户单击选项卡时将 showLoading
的值设置为 true
,并在加载选项卡项的内容时将其再次设置为 false
?