vuejs2 - Vue2:在 vuetify 中加载选项卡项内容时显示进度条
问题描述
我有一个带有四个选项卡的组件。除第一个选项卡外,所有选项卡都包含大量文本字段,并且需要几秒钟来呈现组件。我想在用户单击选项卡时显示一个带有进度条的对话框,并在选项卡打开时将其隐藏。
<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>
我制作了一个代码笔,您可以在其中找到选项卡和对话框。当用户单击选项卡并再次将其设置showLoading
为加载选项卡项目的内容时,如何设置值?true
false
解决方案
推荐阅读
- wordpress - CORS 策略已阻止 Font-Awesome:请求的资源上不存在“Access-Control-Allow-Origin”标头
- dexie - 以编程方式进行 Dexie DB 刷新
- google-sheets - 过滤已发布的图表 Google 表格
- javascript - React Native Context setUser 不是一个函数
- paypal - 用于获取客户数据的 PayPal API 端点
- haskell - 模块'main:Main'在多个文件中定义 - 但它们是同一个文件
- c# - 禁用方形边框 InputRadioGroup
- google-api - YouTube 嵌入 API:调用者没有权限
- acumatica - 如何将 PO301000 上的添加电子邮件 (NewMailActivity) 操作移动到操作菜单中?
- jinja2 - 在字符串 jinja 中查找数字