vuejs+bs(3.7.7) tabs(頁籤)+導引效果+麵包屑

bootstrap = 3.7.7 fontawesome = 4.7 vuejs = 2.6.12

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.9.8/driver.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.9.8/driver.min.css">

<div id="vapp">
  <!--注意加上bs之麵包屑後上下margin必須調整,因其元件會自動加margin處理-->
  <ol class="breadcrumb" style="margin-top:20px;margin-right:15px;margin-left:15px;">
  <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
  <li class="active">估計成本資料輸入作業</li>
  <li class="pull-right">
    <a class="btn-sm btn-info btn-md aintroduct" v-on:click="gohelp">
      <i class="fa fa-question-circle-o" aria-hidden="true"></i> 使用指南
    </a>    
  </li>
</ol>
<!--<button type="butoon" style="margin-top:20px;margin-right:15px;" class="btn btn-info btn-md pull-right" v-on:click="gohelp">
    <i class="fa fa-question-circle-o" aria-hidden="true"></i> 使用指南
  </button>
  
  <br/>-->
  <div class="container-fluid">
    <div class="row">
      <!--這裡的margin-top:40px必須考慮上方button的margin值-->
      <div class="col-md-6" style="min-width:800px;">
               <!--panel-info可依據需求調整為danger/warning/success/primary/default-->
               <div class="panel panel-info">
                  <div class="panel-heading" id="box1">
                     <ul class="nav nav-tabs">
                        <li v-on:click="changetab(1)" v-bind:class="[ activetab === 1 ? 'active' : '' ]"><a href="#"><i class="fa fa-binoculars"></i> CheckList</a></li>
                        <li v-on:click="changetab(2)" v-bind:class="[...

CSS

/*bootstrap tab styles */
.panel .panel-heading .nav.nav-tabs {
   position:relative;
   bottom:-5px;
   height:29px;
   border:none;
   margin-top:-9px;
   margin-left:-9px;
}

.panel .panel-heading .nav.nav-tabs li a {
   height:35px;
   line-height:17px;
   border:1px solid transparent;
}

.panel .panel-heading .nav.nav-tabs li:not(.active) a:hover,
.panel .panel-heading .nav.nav-tabs li:not(.active) a:focus {
   background:rgba(0, 0, 0, 0.05);
}

.panel .panel-heading .nav.nav-tabs li.active a {
   border:1px solid #407AB9;
   border-bottom-color: transparent !important;
   background:#FFF;
}

/* Colors */
.panel.panel-default .panel-heading .nav.nav-tabs li a { color: #555; }
.panel.panel-default .panel-heading .nav.nav-tabs li.active a { border-color:#DDDDDD;}
.panel.panel-primary .panel-heading .nav.nav-tabs li a { color: #FFF; }
.panel.panel-primary .panel-heading .nav.nav-tabs li.active a { color:#407AB9; }
.panel.panel-success .panel-heading .nav.nav-tabs li a { color:#67B857; }
.panel.panel-success .panel-heading .nav.nav-tabs li.active a { border-color:#D8E9C5;}
.panel.panel-warning .panel-heading .nav.nav-tabs li a { color: #8a6d3b; }
.panel.panel-warning .panel-heading .nav.nav-tabs li.active a { border-color:#F8EBCB;}
.panel.panel-danger .panel-heading .nav.nav-tabs li a { color: #a94442; }
.panel.panel-danger .panel-heading .nav.nav-tabs li.active a { border-color:#E8CCD1;}
.panel.panel-info .panel-heading .nav.nav-tabs li a { color: #337ab7;; }
.panel.panel-info .panel-heading .nav.nav-tabs li.active a { border-color:#C1E8F2; }
/*---------------introduction effect-------------*/
.container {
  display: flex;
  justify-content: space-around;
}

.box {
  width: 20%;
  text-align: center;
  background-color: gray;
  height: 40px;
  color: #fff;
  position: relative;
}

.first_box .driver-prev-btn {
  display: none !important;
}

.last_box .driver-prew-btn {
  display: none !important;
}
/*-------------breadcrumbs--------------*/
.breadcrumb >...

JavaScript

/* ref: 
   https://codepen.io/doganuc4r/pen/EQJWgm
   https://stackoverflow.com/questions/48844530/pull-right-button-on-bootstrap-breadcrumb
   https://codepen.io/shin-xi/pen/wvogOoP
   https://github.com/kamranahmedse/driver.js?ref=producthunt  (driver.js)
   driver.js = 0.9.8
   bootstrap = 3.7.7  fontawesome = 4.7 vuejs = 2.6.12
*/
var appinstance = new Vue({
	el:'#vapp',
  data:{
  	msg: 'test',
    activetab: 1,
  },
  computed:{
  
  },
  methods:{
  	initialize(){
    	this.activetab = 1;
    },
    changetab(value){
    	this.activetab = value;      
    },
    gohelp(){ 
    	//依據不同tab位置產生對應的位置(可以再針對這部分做調整,改為較符合動態作法)
    	let motionarry = [];
      motionarry.push({
    			element: "#box1",
    			popover: {
      			className: "first_box",
      			title: "1.選擇功能",
      			description: "",
      			position: "bottom"
    			}
  		});
      switch(this.activetab){
      	case 1:
        	motionarry.push({
    				element: "#box2",
    				popover: {
      				title: "2.輸入查詢條件",
      				description: "<i class='fa fa-camera-retro fa-4x'></i><span style='color:red;'>測試</span>",
      				position: "bottom"
    				}
  				});
          motionarry.push({
    				element: "#box3",
    				popover: {
    					className:"last_box",
      				title: "3.按下按鈕執行動作",
      				description: "",
      				position: "bottom"
    				}
  				});
        	break;
         case 2:
         	motionarry.push({
    				element: "#box4",
    				popover: {
      				title: "2.輸入查詢條件2",
      				description: "<i class='fa fa-bicycle fa-2x'></i><span style='color:blue;'>測試</span>",
      				position: "bottom"
    				}
  				});
          motionarry.push({
    				element: "#box5",
    				popover: {
    					className:"last_box",
      				title: "3.按下按鈕執行動作2",
      				description: "",
      				position: "bottom"
    				}
  				});
         	break;
        case 3:
        	motionarry.push({
    				element: "#box6",
    				popover: {
      				title: "2.輸入查詢條件3",
   ...