基于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 ...
随机推荐
- kafka一直rebalance故障，重复消费
今天我司线上kafka消息代理出现错误日志,异常rebalance,而且平均间隔2到3分钟就会rebalance一次,分析日志发现比较严重.错误日志如下 08-09 11:01:11 131 pool ...
- 【LOJ】#2126. 「HAOI2015」数组游戏
题解 简单分析一下就知道\(\lfloor \frac{N}{i} \rfloor\)相同的\(i\)的\(sg\)函数相同 所以我们只要算\(\sqrt{n}\)个\(sg\)函数就好 算每一个\( ...
- 7-9The Morning after Halloween uva1601
这题可以用普通bfs来做 也可以用双向bfs来做(先欠着) 有点类似专题训练的一题 不过那题是找钥匙开门 不过都用了状态压缩 题意: n,m(<=16) 的网络上有t(<=3) ...
- C#并行编程（6）：线程同步面面观
理解线程同步 线程的数据访问 在并行(多线程)环境中,不可避免地会存在多个线程同时访问某个数据的情况.多个线程对共享数据的访问有下面3种情形: 多个线程同时读取数据: 单个线程更新数据,此时其他线程读 ...
- Redis高可用之哨兵模式Sentinel配置与启动（五）
0.Redis目录结构 1)Redis介绍及部署在CentOS7上(一) 2)Redis指令与数据结构(二) 3)Redis客户端连接以及持久化数据(三) 4)Redis高可用之主从复制实践(四) 5 ...
- Swift map filter reduce 使用指南
转载:https://useyourloaf.com/blog/swift-guide-to-map-filter-reduce/ Using map, filter or reduce to ope ...
- IllegalArgumentException: Unmatched braces in the pattern.
IllegalArgumentException: Unmatched braces in the pattern. 非法参数异常. 不匹配的 吊带 在 样品 中. === 没有管. 项目一直卡在d ...
- UVALive 7146 （贪心+少许数据结构基础）2014acm/icpc区域赛上海站
这是2014年上海区域赛的一道水题.请原谅我现在才发出来,因为我是在太懒了.当然,主要原因是我刚刚做出来. 其实去年我就已经看到这道题了,因为我参加的就是那一场.但是当时我们爆零,伤心的我就再也没有看 ...
- Gunicorn部署部分的翻译
部署Gunicorn 文档建议Gunicorn最好是用在代理服务器后面.(等于前面最好加一个反向代理) Nginx Configuration 文档建议用Nginx,当然用其他也可以,但是要确保当你用 ...
- 使用Puppeteer进行数据抓取(一)——安装和使用
Puppeteer是 Google Chrome 团队官方的Chrome 自动化工具.它本身是基于Chrome Dev Protocol协议实现的,但它提供了更高层次API封装,使用起来更加方便快捷. ...