前端实战项目

_框架Vue3.0项目教程(二)Vue3.0医学项目选项卡Tab的实现

对于一个移动端的应用而言,大部分的界面都包含有选项卡、列表及轮播等前端技术手段的存在,这里就从前端的选项卡入手进行Vue3.0项目的开发,使用的工具采用vscode,工具的使用比较简单,这里就不再叙述了。

一、构建基于Vue组件开发的选项卡Tab.vue


依据Vue开发组件的模板要求,必须提供<template>、<script>和</style>三个部分。<template>负责的是页面的布局部分,<script>负责的是script的代码部分,<style>负责的是样式部分。

对于选项卡来说,首先根据选项卡的样子构建<template>模块中的具体布局,如下图所示的具体选项卡的样子。

从图中可以看出选项卡一般由文字、链接构成,当前文字点击后样式发生变化的特点。在Vue3.0的选项卡布局上,<template>模板内可以用一个div,定义其类选择器为class=”tab“,这个tab可以根据移动端的大小设置弹性盒子,<div>标签包含的元素是文字构成的链接,在Vue3.0中可以使用router-link路由链接标签,路由链接可以在编译时转换成html中的a标签,其类别选择器可以定义一个tab-item,目的是使用flex:1协助导航平分移动端屏幕布局。router-link路由链接标签中有to属性绑定到一个含有子路由的命名路由上,router-link路由链接标签中有key属性绑定到每个节点做一个唯一标识。设置了router-link的内容相当于在编译时设置a标签的内容,才能实现内容的路由链接。内部部分可以用span标签包围文字达到目的。这样,template模板中的代码内容如下。

<template>
    <div class="tab">
        <router-link
            class="tab-item"
            v-for="tab in tabs"
            :key="tab.path"
            :to="tab.path">
            <span class="tab-link">
                {{tab.name}}
            </span>
        </router-link>

    </div>
</template>

代码中router-link标签中有一个“:to”绑定属性,由于每一个导航内容都要导航到具体内容中,”tab.path”体现了在Vue3.0的data()方法中返回json数据,数据中有一个tabs的键值数组,数组中的每一个tab值中path路径是具体路由的路径,<span>标签括起来的内容部分包含有数组tabs中每一个tab值中name对应的名字。router-link路由链接标签中的v-for属性作用是将遍历数组tabs中的每一个子项的值,这个子项的值就是tab。根据<template>布局中的特点决定了script标签中需要提供一个选项卡的数组数据,代码如下。

<script>
    export default{
        name:'tab',
        data(){
            return{
                tabs:[
                    {
                        name:'商城',
                        path:'/shop'
                    },
                    {
                        name:'问诊',
                        path:'/inquiry'
                    },
                    {
                        name:'健康',
                        path:'/healthy'
                    },
                    {
                        name:'搜索',
                        path:'/search'
                    }
                ]
            }
        }
    }
</script>

代码中定义了一个由“商城”、“问诊”、“健康”、“搜索”四个导航项组成的选项卡数据,选项卡名字属性键name和选项卡路由路径选项卡path构成了json数组tabs。Vue3.0尽写script部分,一般首先使用export default{}这是在复用组件的时候用到的。假设写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用import/export 语法 ,这属于ES6的语法,在文件 A 中定义输出接口 export ,在文件 B 中引入 import ,把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

接下来就需要定义页面中导航选项卡的样式,前面对选项卡说明的时候提到过,最外层div可以使用class=”tab”引用弹性盒子的样式,display:flex语句可以声明一个弹性盒子。Height属性表明了选项卡的高度,line-height做选项卡的行距样式,如果line-height属性与height属性的值相同的话,可以达到文字垂直居中的效果。font-size属性可以定义导航中的文字大小。选项卡中的每一个选项文字可以使用class=”tab-item”来定义其样式,flex:1表示根据选项卡中选项的个数平分屏幕中的选项,文字的水平居中可以使用text-align属性,对于每一个链接需要定义.tab-link类和链接类被激活时的.tab-link-active类。选项卡每一项选项文字一般在正常时候是一个文字颜色,发生鼠标点击和导标经过时也需要定义一个文字颜色,color属性作用在.tab-link类和链接被激活tab-link-active类,再根据具体需求定义文字的显示位置和边框特点,具体的定义代码如下所示。

<style lang="scss" scoped>
    .tab{
        display:flex;
        height:44px;
        line-height:44px;
        font-size: $font-size-medium;
        .tab-item{
            flex:1;
            text-align:center;
        }
        .tab-link{
            padding-bottom:5px;
            color: $color-text-l;
        }
        .router-link-active{
            .tab-link{
                color:$color-theme;
                border-bottom:2px solid $color-theme;
            }
        }
    }
</style>

代码中style部分lang=”scss”指示了CSS采用SCSS样式来定义样式,在定义的样式语句中color−text−l和color−text−l和font-size-medium这两个数值采用了$定义的变量,这样的定义内容是SCSS所特有的。具体定义变量的内容文件可以放在assets目录下建立一个scss文件夹,在这个文件夹中添加文件variable.scss变量文件,其中定义一些SCSS变量名,这些变量名在文件中用到,或在未来的使用中用到,文件内容如下。

//颜色定义规范
$color-background:#222;
$color-background-d:rgba(0,0,0,0.3);
$color-highligh-background:#333;
$color-dialog-background:#666;
$color-theme:#ffcd32;
$color-theme-d:rgba(255,205,49,0.5);
$color-sub-theme:#d93f30;
$color-text:#fff;
$color-text-d:rgba(255,255,255,0.3);
$color-text-l:rgba(255, 255, 255, 1);
$color-text-ll:rgba(7, 6, 6, 0.8);
//文字定义规范
$font-size-small-s:10px;
$font-size-small:12px;
$font-size-medium:14px;
$font-size-medium-x:16px;
$font-size-large:18px;
$font-size-large-x:22px;

文件内容设置结束后,在具体的vue的Tab组件中没有得到使用,如果需要使用,就必须添加一个vue.config.js文件,这个vue.config.js文件起到了Vue内容配置作用。可以设置vue.config.js中使用module.exports模块导出作用,将css作为module其中一个模块,loaderOptions表明CSS加载的解析器的具体内容,scss就是此项目加载的CSS预解析器。在scss中指明项目以预加载的scss自定义文件,具体代码内容如下。

module.exports={
    css:{
        loaderOptions:{
            scss:{
                prependData:`
                @import "@/assets/scss/variable.scss";
                `
            }
        }
    }
}

代码中使用@import 的方式引入外部CSS文件,会绕开我们设置的 scoped 也就是只在当前页面生效,所以这里我在这个页面@import 引入的 variable.css 实际上是应用到全局中去了。

二、选项卡组件Tab中路由文件的设置


前面设置了选项卡组件,最终选项卡中的每一项需要路由到具体的地址页面中去,这是由Vue的vue-router路由功能实现的,路由功能由vue脚手架产生项目的router文件夹index.js文件中。在index.js由定义常量的标识符const定义routes变量,其包括的内容是多种路由路径组成的数组,数组中的每一项path指明具体的路由路径,此路由必须与Tab.vue中数据tabs数组中的每一项路径是一致的,如下图所示。

设置了具体路径后,还需要设置导航路径指定的组件,routes变量中的component即指定了具体的组件类,这里在views文件夹中定义“商城”导航路由地址”/shop”对应的组件Shop,“问诊”路由地址导航”/inquiry”对应的组件Inquiry,“健康”导航路由地址“/healthy“对应的组件Healthy,“搜索”导航路由地址“/search”对应的组件Search。

以上四个组件的具体代码分别列举如下。

shop.vue代码:

<template>
    <div class='shop'>
        商城页面
    </div>
</template>
<script>
    export default{
        name:"shop"
    }
</script>
<style lang='scss' scoped>
</style>

由于代码比较简单,在template中使用div标签,定义shop类别选择器,其中包括的文本“商城页面”,在script中使用export default标识符,将此组件导出供外部调用。

inquiry.vue代码:

<template>
    <div class="inquiry">
       问诊页面
    </div>
</template>
<script>
    export default{
        name:"inquiry"
    }
</script>
<style lang="scss" scoped>
</style>

代码在原理上与“商城页面”相同,只不过显示的内容是“问诊页面”。

healthy.vue代码:

<template>
    <div class="healthy">
        健康页面
    </div>
</template>
<script>
    export default{
        name:"healthy"
    }
</script>
<style lang="scss" scoped>
</style>

代码在原理上与“商城页面”相同,只不过显示的内容是“健康页面”。

search.vue代码:

<template>
    <div class="search">
        搜索页面
    </div>
</template>
<script>
    export default{
        name:"search"
    }
</script>
<style lang="scss" scoped>
</style>

代码在原理上与“商城页面”相同,只不过显示的内容是“搜索页面”。

以上四个组件的文件建立成功后,将router文件夹下的index.js文件中导入四个组件,在const常量标识符指定的routes常量中定义数组,在数组中的每一项添加component组件的指示项,不同的path对应不同的component,具体的index.js中的代码如下。

import { createRouter, createWebHashHistory } from 'vue-router'
import Shop from '@/views/shop'
import Inquiry from '@/views/inquiry'
import Healthy from "@/views/healthy"
import Search from "@/views/search"
const routes = [
  {
    path: '/shop',
    component: Shop
  },
  {
    path: '/inquiry',
    component: Inquiry
  },
  {
    path: '/healthy',
    component: Healthy
  },
  {
    path: '/search',
    component: Search
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

三、App.vue中使用选项卡组件Tab.vue


通过前面的步骤,Tab.vue组件已定义结束,其具体的使用可以在App.vue中导入后,Tab.vue选项卡组件导入后,需要在script代码部分export default导出部分定义component组件的使用,在components中使用Tab组件。这样就可以直接在<template>中使用tab,同时点击tab选项卡时还需要路由到不同的页面,这里就需要使用<router-view></router-view>的路由视图来搞定这样的事情,这样,App.vue中代码如下。

<template>
  <tab></tab>
  <router-view></router-view>
</template>
<script>
import Tab from '@/components/tab/tab'

export default {
  components:{
    Tab
  }
}
</script>

<style lang="scss" scoped>

</style>

在运行程序,如果出现eslint的错误,可以在项目目录文件夹下添加文件.eslintignore文件,内容指定文件的扩展名即可,.eslintignore文件内容如下。

*.vue
*.js

最后,就执行命令来运行这个vue项目,执行命令如下。

npm run serve

通过上面的命令,最终运行后,在浏览器中的结果如下图所示。

至此,使用vue3.0就完成了移动端的选项卡功能

四、git命令将项目上传到github中


使用cd进入项目的目录中,然后首先使用下面的命令将所有的文件加到暂存区中。

git add .

接下来把暂存区中的操作提交到本地仓库中。

git commit –m “项目中的tab选项卡”

再次,创建远程仓库的分支。使用如下命令。

git remote add origin github项目的具体链接地址

如果是第一次上传项目,使用如下命令将项目上传到github中。

git  push  -u origin master

最终,项目上传到github的master分支中。如下图所示。

代码地址:https://github.com/wawacode/myvue3demo/tree/master

Logo

前往低代码交流专区

更多推荐