基于Vue、Bootstrap的Tab形式的进度展示

最近基于Vue、Bootstrap做了一个箭头样式的进度展示的单页应用，并且支持了对于一个本地JS文件的检索，通过这个单页应用，对于Vue的理解又深入了一些。在这里把主要的代码分享出来。

本单页应用实现了几个功能：

1、点击箭头导航栏能够切换页面内容

2、使用了渲染到方式来展示内容，内容采用混合模板

3、对步骤一中的输入文本框进行监听，根据输入的内容，从本地JS文件检索给出用户提示

期望改进的地方

1、点击Tab链接的时候，能够有页面切换效果（左右滑动）

2、文本框的提示方式改为 Suggestion

全部的代码可以参见我的 github 主页上的项目代码，这里只分享主要的代码。

看一下页面效果

先看一下代码结构

具体的代码

index.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>智慧园区考勤操作指引</title>

    <meta name="description" content="描述了北数员工如何绑定智慧园区，并通过智慧园区进行日常工作考勤。">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="./bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">

        @-ms-viewport     { width: device-width; }

        @-o-viewport      { width: device-width; }

        @viewport         { width: device-width; }

        body { padding-top:20px; padding-bottom: 20px; }

        .header, .footer { padding-right: 15px; padding-left: 15px; }

        .header { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; }

        .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; }

        .footer { padding-top: 19px; color: #777; border-top: 1px solid #e5e5e5; margin-top: 30px; }

        .jumbotron {  }

        .step-container { margin:30px 0; }

        @media (min-width: 1024px) {

            .container {

                max-width: 1000px;

            }

        }

        .container-narrow > hr { margin: 30px 0; }

        .step-container { clear: both; vertical-align: middle; display: table-cell; margin-bottom: 30px; }

        .rs-step-container { height: 40px; margin-bottom: 25px; }

        .rs-arrow {  }

        .rs-arrow .rs-step { text-align:center; cursor: pointer; display: inline-block; padding:10px 38px 10px 38px; position: relative; background-color: #e7e7e7; margin:0 3px; font-size: 14px;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  }

        .rs-arrow .rs-step:after, .rs-arrow .rs-step:before { content: " "; position: absolute; top: 0; right: -17px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 17px solid #e7e7e7; z-index: 2; transition: border-color 0.2s ease; }

        .rs-arrow .rs-step:before { right: auto; left: 0; border-left: 17px solid #fff;     z-index: 0; }

        .rs-arrow .rs-step:first-child:before { border: none; }

        .rs-arrow .rs-step:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

        .rs-arrow .current, .rs-arrow .active { background-color: #337ab7; color:#fff; }

        .rs-arrow .current:after, .rs-arrow .active:after { border-left-color: #337ab7;  }

        .rs-arrow .active a { color:#fff; }

        .rs-arrow div:hover { color:tomato; }

        .rs-arrow a:hover { text-decoration: none; }

        .step-content { margin-top: 50px; }

        .fade-enter-active, .fade-leave-active { transition: opacity .5s; }

        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }

        /*路由切换动画*/

        .slide-right-enter-active,

        .slide-right-leave-active,

        .slide-left-enter-active,

        .slide-left-leave-active {

            will-change: transform;

            transition: all 500ms;

            position: absolute;

        }

        .slide-right-enter {

            opacity: 0;

            transform: translate3d(-100%, 0, 0);

        }

        .slide-right-leave-active {

            opacity: 0;

            transform: translate3d(100%, 0, 0);

        }

        .slide-left-enter {

            opacity: 0;

            transform: translate3d(100%, 0, 0);

        }

        .slide-left-leave-active {

            opacity: 0;

            transform: translate3d(-100%, 0, 0);

        }

        .fade-enter-active, .fade-leave-active {

            transition: opacity 0.3s

        }

        .fade-enter, .fade-leave-active {

            opacity: 0

        }

    </style>

    <!--[if lt IE 8]>

        <script type="text/javascript">

            window.location.href='unsupport_tips.html'

        </script>

    <![endif]-->

    <!--[if lt IE 9]>

      <script src="./html5shiv.min.js"></script>

      <script src="./respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <div class="container">

        <div class="header clearfix">

            <nav>

                <ul class="nav nav-pills pull-right">

                    <li><a href="javascript:void(0);" target="_blank">友情链接</a></li>

                    <li><a href="javascript:void(0);" target="_blank">友情链接</a></li>

                    <li><a href="javascript:void(0);">友情链接</a></li>

                </ul>

            </nav>

            <h3 class="text-muted" id="ccb-title" v-bind:title="message">智慧园区考勤指引</h3>

        </div>

        <div id="app">

        </div>

        <footer class="footer">

            <p>&copy;2018 cocowool</p>

        </footer>

    </div>

    <script src="./jquery-3.3.1.min.js" type="text/javascript"></script>

    <script src="./bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="./dist/build.js"></script>

    <script type="text/javascript" src="./bsuser_utf8.js"></script>

</body>

</html>

main.js

import Vue from 'vue'

import routes from './routes'

const app = new Vue({

  el: '#app',

  data: {

    currentRoute: window.location.pathname,

  },

  watch : {

    currentRoute (to, from){

      to = routes[to] ? routes[to] : routes['/']

      from = routes[from] ? routes[from] : routes['/']

      if(to.meta.index > from.meta.index){

        this.transitionName = "slide-left"

      }else{

        this.transitionName = "slide-right"

      }

    }

  },

  methods : {

  },

  computed: {

    ViewComponent () {

      //console.log(bsuser)

      const matchingView = routes[this.currentRoute] ? routes[this.currentRoute].name : 'Home'

      return matchingView

        ? require('./pages/' + matchingView + '.vue')

        : require('./pages/Home.vue')

    }

  },

  render (h) {

    return h(this.ViewComponent)

    // return h(require('./pages/About.vue'))

  }

})

window.addEventListener('popstate', () => {

  app.currentRoute = window.location.pathname

})

route.js

export default {

  '/' : {

    name : 'Home',

    path : '/',

    meta : { index:0 }

  },

  '/step1' : {

    name : 'Step1',

    path : '/step1',

    meta : { index:1 }

  },

  '/step2' : {

    name : 'Step2',

    path : '/step2',

    meta : { index:2 }

  },

  '/step3' : {

    name : 'Step3',

    path : '/step3',

    meta : { index:3 }

  }

}

Main.vue

<template>

    <div class="step-container">

        <div class="rs-step-container rs-arrow">

            <v-tab href="/home">说明</v-tab>

            <v-tab href="/step1">第一步:查询考勤ID</v-tab>

            <v-tab href="/step2">第二步:下载APP & 绑定考勤ID</v-tab>

            <v-tab href="/step3">第三步:考勤并查看结果</v-tab>

        </div>

        <!-- <div>

            <input type="text" v-model="question" name="question">

        </div> -->

        <transition name="fade" mode="out-in" v-on:after-enter="afterEnter" appear>

            <slot></slot>

        </transition>

    </div>

</template>

<script>

import VLink from '../components/VLink.vue'

import VTab from '../components/VTab.vue'

export default {

    methods : {

        inputChanged(){

            console.log("Input CHanged")

        }

    },

    watch : {

    },

    components: {

        VLink,

        VTab

    }

}

</script>

Step1.vue

<template>

  <main-layout>

    <div class="step-content slide-left">

        <div class="form-group">

            <label for="searchItem" class="col-sm-2 control-label text-right" style="padding-top:8px;">用户名:</label>

            <div class="col-sm-8">

                <input type="text" id="searchVal" v-model="searchVal" @input="inputChanged" name="searchVal" placeholder="请输入北数考勤系统登录用户名、中文姓名或身份证号进行查询" class="form-control">

            </div>

            <div class="col-sm-2">&nbsp;</div>

        </div>

        <div class="form-group" style="margin-top:30px; clear:both; padding-top:30px;">

            <div class="col-sm-2">&nbsp;</div>

            <div class="col-sm-8">

                <table class="table table-striped" v-if="userList.length > 0">

                    <thead>

                        <tr>

                            <th>姓名</th>

                            <th>登陆用户</th>

                            <th>考勤编号</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-for='(item, key) in userList'>

                            <td>{{item.CNNAME}}</td>

                            <td>{{item.BSUSER}}</td>

                            <td>{{item.WHID}}</td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

            </div>

        </div>

    </div>

  </main-layout>

</template>

<script>

import MainLayout from '../layouts/Main.vue'

export default {

    components : {

        MainLayout

    },

    data() {

        return {

            searchVal : '',

            userList : []

        }

    },

    props: {

        value : {

            type: String,

            default:''

        }

    },

    computed:{

    },

    methods:{

        inputChanged(event){

            this.userList = []

            var len = this.searchVal.length

            if( len > 0){

                for (var i = 0 ; i < bsuser.length ; i++){

                    if(bsuser[i].ID.substring(0,len) == this.searchVal || bsuser[i].CNNAME.substring(0,len) == this.searchVal || bsuser[i].BSUSER.substring(0,len) == this.searchVal ){

                        this.userList.push(bsuser[i])

                    }

                }

            }

        }

    }

}

</script>

参考资料：

1、Fancy arrow-type progress bar

2、Create border arrow with css

3、CSS Progress Wizard Example Page

4、Responsive Step Progress Indicator with Pure CSS

5、使用 vue-router 切换页面时怎么设置过渡动画

6、基于Vue的页面切换左右滑动效果

7、tab切换功能——vue

8、解决vue在ie9中的兼容问题

基于Vue、Bootstrap的Tab形式的进度展示的更多相关文章

基于 Vue BootStrap的迷你Chrome插件
代码地址如下:http://www.demodashi.com/demo/14306.html 安装安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过安装包管 ...
基于Vue开发的tab切换组件
github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...
[译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
vue_shop(基于vue电商管理后台网站)
vue_shop 目录 vue_shop day01 实现登录功能项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件添加第三方字体: 添加表单验证导入a ...
基于Vue实现后台系统权限控制
原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...
一款基于Vue的扩展性组件库 VV-UI
github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...
基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
基于Vue的Quasar Framework 介绍这个框架UI组件很全面
基于Vue的Quasar Framework 介绍这个框架UI组件很全面基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

随机推荐

004.SMB之guest级别配置
一配置文件修改注意: 1 share级别权限访问即,无任何验证共享,对guest开放. 2 新版samba4已取消share级别,可使用user级别配置成无验证共享. 1.1 全局配置文件修改 [ ...
collectionFramwork-1
1. Set.List和Map可以看做集合的三大类. List集合是有序集合,集合中的元素可以重复,访问集合中的元素可以根据元素的索引来访问. Set集合是无序集合,集合中的元素不可以重复,访问集合中 ...
html （第四本书第九章参考）
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
ABP单元测试
一.介绍在本文中,我将介绍如何为基于ASP.NET Boilerplate的项目创建单元测试. 我将使用本文开发的相同的应用程序(使用AngularJs,ASP.NET MVC,Web API和En ...
centos yum 安装php mysql
1 安装php7 查看 centos 版本 # cat /etc/centos-release 删除之前的 php 版本 # yum remove php* php-common rpm 安装 Php ...
入门智能家居，从 IFTTT 到 HomeKit 自动化（二）
入门智能家居,从 IFTTT 到 HomeKit 自动化(二) 目录 0. HomeKit.HomeBridge.HomeAssistant 分别是什么?关系是什么? 1. 开始前的准备 2. 整 ...
Web大前端面试题-Day2
1.伪类与伪元素的区别? 1) 定义区别伪类伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息. 前者包含那些匹配指定状态的元素,比如:visited,:active:后者包含那些 ...
python3 开发面试题（面向对象）6.6
""" 封装.继承.多态 1. 谈谈你对面向对象的理解? 2. Python面向对象中的继承有什么特点? 3. 面向对象深度优先和广度优先是什么? 4. 面向对象中sup ...
[POJ1144]Network
来源:Central Europe 1996 思路:Tarjan求割点. 一个点$x$为割点当且仅当: 1.$x$为根结点且有两棵不相交的子树. 2.$x$不为根结点且它的子树中没有可以返回到$x$的 ...
Xtreme8.0 - Kabloom dp
Xtreme8.0 - Kabloom 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/kablo ...