2020it邦铁人赛-30天手把手的Vue.js教学 Day30 - 关心时事! 做个简单的COVID-19追踪app吧!(下)

tags: Vue.js ItIron2020

前言

昨天我们已经成功了做出了六个图表,利用将整理成renderData让我们印出的部分可写得相当的简洁~! 今天我们要做的就是让画面稍微微调一下,让浏览不同图表的过程更轻松一点! 内容会更加的简短,我们马上就开始吧!

认识vutify v-tab组件

v-tab顾名思义,就是我们一般网页上切换不同显示画面的小按钮,大致上来说分成两个部分,更多的细节可以参考官方文件(个人认为旧版的写得比较好)

  1. v-tab容器,设定你要有几个tab(v-tabs)
  2. 每个tab的内容(v-tab-items)

我们先从官方文件上复制程序码下来,看一下整个使用的情况就会更加了解了,请你在原本的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' },
]

此时你观察一下你的画面,你应该会看到一排相当突兀的玩意儿
demo1

打开你的vue-devtool,点选APP,观察一下tab变数的变化(右下角)

demo2

注意到在上方的程序码中,v-tabs & v-tabs-items都与tab变数做了双向绑定,它就是利用这个原理去追踪你目前选到哪个tab、要呈现什麽内容

利用v-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>

demo3

不过此时自然还没有任何作用,我们需要在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依样正常运作~!

demo

剩余的样式微调就交给你们自由发挥罗!

结语

我们今天顺利的完成了这个简单的tracking app,内容真的一点都不困难~甚至你不使用框架也能轻松达到类似的效果,我的作法自然不会是唯一、最乾净的写法,很多部分你也可以自己重构:D 做为一个开发者我还真~的菜得很,任何建议都欢迎提供的! 这个系列文其实节奏上掌握得蛮差劲的,我不确定一个完全的初学者到底能懂多少,之後写类似的教学文章时我会再特别注意的! 那大家就掰掰啦,希望这系列文有多少帮到一些人!

此文章同步发布於个人部落格,有兴趣的大大也可以来参观一下:D


<<:  Day 28. 凭证绑定 Certificate Pinning 绑起来!

>>:  铁人赛Day30-第九章:动画5.2-天气与湾熊,今天一次完成它!

Day7. 使用 Whimsical 绘制低精度 Wireframe

制作低精度原型时,纸、笔、及便利贴是相当方便的工具,但许多人是手绘苦手,画出来的线歪歪斜斜,实在很难...

Day 11 漏洞分析 - Vulnerability Analysis (nikto)

经过连续十天的收集情报,体验了各式工具,可以发现前面介绍的大部分工具都是单纯的收集情报,少部分则可以...

[Day 9] Leetcode 917. Reverse Only Letters (C++)

前言 今天的daily challenge题目是917. Reverse Only Letters,...

Day 8 - 基本语法3 (运算)

昨天我们学了转型态等等的语法,今天我们继续! 正文 运算 规则 在现实生活中,我们运算会写成 2 +...

JavaScript学习日记 : Day25 - Set

Set与Map不同再於Set没有key,是指有包含值的特殊集合,且每个值只能出现一次不能重复。 Se...