基于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>©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"> </div>
</div>
<div class="form-group" style="margin-top:30px; clear:both; padding-top:30px;">
<div class="col-sm-2"> </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 ...
随机推荐
- 多线程学习笔记二之JUC组件
目录 概述 JUC锁框架图 使用内置锁还是JUC显示锁? 概述 为了对共享资源提供更细粒度的同步控制,JDK5新增了java.util.concurrent(JUC)并发工具包,并发包新增了Loc ...
- SmartSVN11 Mac版 注册码序列号
Name=apipostAddress=1337 iNViSiBLE Str.Email=3257132998@qq.comFreeUpdatesUntil=2099-09-26LicenseCoun ...
- 决策树ID3算法--python实现
参考: 统计学习方法>第五章决策树] http://pan.baidu.com/s/1hrTscza 决策树的python实现 有完整程序 决策树(ID3.C4.5.CART ...
- [lisp] scheme学习2
1.在scheme中,为了效率,对序对的操作 cons car 和cdr是内部实现的,这里是scheme实现, 其中cons用到了闭包 (define (cons a b) (define (disp ...
- Linux系统的组成
<linux系统7大子系统> a:SCI(system call interface) ————用户程序通过软件中断后,调用系统内核提供的功能,这个在用户空间和内核提供的服务之间的接口称为 ...
- MyBatis3与Spring3无缝集成-从iBatis平滑过渡
从2010开始接触iBatis到现在,一直到现在把iBatis作为数据访问层ORM.为了演示一个Web应用,今天又搭了个SpringMVC应用,由于应用比较简单,Spring版本直接用最新版本3.2. ...
- 马士兵hadoop第五课：java开发Map/Reduce
马士兵hadoop第一课:虚拟机搭建和安装hadoop及启动 马士兵hadoop第二课:hdfs集群集中管理和hadoop文件操作 马士兵hadoop第三课:java开发hdfs 马士兵hadoop第 ...
- 使用 Python 登录网站（转）
对于大部分论坛,我们想要抓取其中的帖子分析,首先需要登录,否则无法查看. 这是因为 HTTP 协议是一个无状态(Stateless)的协议,服务器如何知道当前请求连接的用户是否已经登录了呢?有两种方式 ...
- 使用 IntraWeb (11) - 基本控件之 TIWButton
所在单元及继承链: IWCompButton.TIWButton < TIWCustomControl < TIWBaseHTMLControl < TIWBaseControl & ...
- IAR EWARM __iar_program_start, __iar_data_init3, __iar_copy_init3, __iar_zero_init3
#include <stdint.h> // The type of a pointer into the init table. typedef void const * table_p ...