Vue.js
ItIron2020
昨天我们已经成功了做出了六个图表,利用将整理成renderData让我们印出的部分可写得相当的简洁~! 今天我们要做的就是让画面稍微微调一下,让浏览不同图表的过程更轻松一点! 内容会更加的简短,我们马上就开始吧!
v-tab顾名思义,就是我们一般网页上切换不同显示画面的小按钮,大致上来说分成两个部分,更多的细节可以参考官方文件(个人认为旧版的写得比较好)
我们先从官方文件上复制程序码下来,看一下整个使用的情况就会更加了解了,请你在原本的h1标题下加入以下的程序码
<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>{{ item.content }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
并在data属性中新增以下两个变数
tab: null,
items: [
{ tab: 'One', content: 'Tab 1 Content' },
{ tab: 'Two', content: 'Tab 2 Content' },
{ tab: 'Three', content: 'Tab 3 Content' },
{ tab: 'Four', content: 'Tab 4 Content' },
{ tab: 'Five', content: 'Tab 5 Content' },
{ tab: 'Six', content: 'Tab 6 Content' },
{ tab: 'Seven', content: 'Tab 7 Content' },
{ tab: 'Eight', content: 'Tab 8 Content' },
{ tab: 'Nine', content: 'Tab 9 Content' },
{ tab: 'Ten', content: 'Tab 10 Content' },
]
此时你观察一下你的画面,你应该会看到一排相当突兀的玩意儿
打开你的vue-devtool,点选APP,观察一下tab变数的变化(右下角)
注意到在上方的程序码中,v-tabs & v-tabs-items都与tab变数做了双向绑定,它就是利用这个原理去追踪你目前选到哪个tab、要呈现什麽内容
看完上方的说明之後,我想你应该猜到我们要怎麽用这个组件了,没错~! 我们要把每个图表塞进v-tabs-items内! 请先将刚刚的demo code砍乾净,我们先做v-tabs的部分! 不过在那之前,你会发现我们所要显示label在之前的renderData属性中已经写过一次了! 既然都要用到 那还是先抽出来吧!
请你在data部分新增labels属性并写入以下的内容
labels: [
'Positive',
'Hoptialized',
'InIcu',
'OnVentilators',
'Recovered',
'Deaths',
]
并改写一下renderData的部分,把原先宣告labels变数的地方拔掉,并在解构的部分加入labels
const {
arrPositive,
arrHoptialized,
arrInIcu,
arrOnVentilators,
arrRecovered,
arrDeaths,
labels // 加入这行
} = this
最後只要在我们的template部分加入(一样加在h1下方)以下的程序码,第一步骤就完成罗!
href属性是为了让tab的值更好懂,否则它只会根据你选择的index来变动值,tab值就会是0、1、2、3而非我想要的#Positive、#Hoptialized
<v-tabs v-model="tab">
<v-tab
v-for="item in labels"
:key="item"
:href="`#${item}`">
{{ item }}
</v-tab>
</v-tabs>
不过此时自然还没有任何作用,我们需要在v-tabs-items中把图表们塞进去,请在v-tabs下方加入以下的程序码
<v-tabs-items v-model="tab">
<v-tab-item
v-for="chartData in renderData"
:key="chartData.id"
:value="chartData.label"
>
<v-card flat>
<v-row v-if="arrPositive.length">
<v-col cols="12">
<h2>{{ chartData.label }}</h2>
<LineChart
:chartData="chartData.data"
:options="chartOptions"
:label="chartData.label"
:chartColorOptions="chartData.chartColorOptions"
/>
</v-col>
</v-row>
</v-card>
</v-tab-item>
</v-tabs-items>
最终template部分程序码为
<template>
<v-app>
<v-main>
<v-container>
<v-card>
<v-container>
// 标题
<h1>COVID-19 Tracking Dashboard</h1>
// 建立tabs
<v-tabs v-model="tab" background-color="primary" dark>
<v-tab v-for="item in labels" :key="item" :href="`#${item}`">
{{ item }}
</v-tab>
</v-tabs>
// 建立每一个tabs的内容
<v-tabs-items v-model="tab">
<v-tab-item
v-for="chartData in renderData"
:key="chartData.id"
:value="chartData.label"
>
// render每一个图表
<v-card flat>
<v-row v-if="arrPositive.length">
<v-col cols="12">
<h2>{{ chartData.label }}</h2>
<LineChart
:chartData="chartData.data"
:options="chartOptions"
:label="chartData.label"
:chartColorOptions="chartData.chartColorOptions"
/>
</v-col>
</v-row>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-container>
</v-card>
</v-container>
</v-main>
</v-app>
</template>
到这边就大功告成啦! 一切都像我们之前的preview依样正常运作~!
剩余的样式微调就交给你们自由发挥罗!
我们今天顺利的完成了这个简单的tracking app,内容真的一点都不困难~甚至你不使用框架也能轻松达到类似的效果,我的作法自然不会是唯一、最乾净的写法,很多部分你也可以自己重构:D 做为一个开发者我还真~的菜得很,任何建议都欢迎提供的! 这个系列文其实节奏上掌握得蛮差劲的,我不确定一个完全的初学者到底能懂多少,之後写类似的教学文章时我会再特别注意的! 那大家就掰掰啦,希望这系列文有多少帮到一些人!
此文章同步发布於个人部落格,有兴趣的大大也可以来参观一下:D
<<: Day 28. 凭证绑定 Certificate Pinning 绑起来!
>>: 铁人赛Day30-第九章:动画5.2-天气与湾熊,今天一次完成它!
制作低精度原型时,纸、笔、及便利贴是相当方便的工具,但许多人是手绘苦手,画出来的线歪歪斜斜,实在很难...
经过连续十天的收集情报,体验了各式工具,可以发现前面介绍的大部分工具都是单纯的收集情报,少部分则可以...
前言 今天的daily challenge题目是917. Reverse Only Letters,...
昨天我们学了转型态等等的语法,今天我们继续! 正文 运算 规则 在现实生活中,我们运算会写成 2 +...
Set与Map不同再於Set没有key,是指有包含值的特殊集合,且每个值只能出现一次不能重复。 Se...