vuejs+bs(4.3.1) tabs(頁籤)

bootstrap = 4.3.1(card) fontawesome = 4.7 vuejs = 2.6.12

by cactus77kiki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    
    <div id="vapp">
    <!--display: inline-block效果:外div寬度依據內div調整-->
        <div style="margin:20px;display: inline-block;min-width: 1000px;">
            <!--外框調整色系-->
            <!--<div class="card text-center border-primary mb-3 ">-->
            <div class="card text-center panel-info">
                <!--搭配css之註1:headerzone調整背景色系、字體色系-->
                <!--搭配css之註2:新增alert-info色系-->
                <div class="card-header alert-info panel-info-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a v-on:click="activetab=1"
                                v-bind:class="[ activetab === 1 ? 'nav-link active' : 'nav-link' ]" href="#"
                                style="color: #337ab7;"><i class="fa fa-binoculars"></i> CheckList</a>
                        </li>
                        <li class="nav-item">
                            <a v-on:click="activetab=2"
                                v-bind:class="[ activetab === 2 ? 'nav-link active' : 'nav-link' ]" href="#"
                                style="color: #337ab7;"><i class="fa fa-bar-chart"></i> Rates</a>
                        </li>
                        <li class="nav-item">
                            <a v-on:click="activetab=3"
                                v-bind:class="[ activetab === 3 ? 'nav-link active' : 'nav-link' ]" href="#"
   ...

CSS

.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;
        }

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

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

        /*---自訂 s---*/
        /*註1：此部分(panel-info/primary/success/warning/danger)可以自訂色系;bs4.3.1與bs3.3.7又不同;*/
        /*註2：若要使用bs4.3.1預設設系,可以參考'alert'之色系,將此部分之自訂顏色要mark,並搭配異動html套用之css*/
        .panel-info {
            /*border-color: #C1E8F2 !important;*/
        }

        .panel-info-header {
            /*background-color: #d9edf7 !important;*/
        }

        /*---自訂 e---*/

        /* Colors */
        .card.panel-default .card-heading .nav.nav-tabs li a {
            color: #555;
        }

        .card.panel-default .card-heading .nav.nav-tabs li.active a {
            border-color: #DDDDDD;
        }

        .card.panel-primary .card-heading .nav.nav-tabs li a {
            color: #FFF;
        }

        .card.panel-primary .card-heading .nav.nav-tabs li.active a {
            color: #407AB9;
        }

        .card.panel-success .card-heading .nav.nav-tabs li a {
            color: #67B857;
        }

        .card.panel-success .card-heading .nav.nav-tabs li.active a {
            border-color: #D8E9C5;
        }

        .card.panel-warning .card-heading .nav.nav-tabs li a {
            color: #8a6d3b;
        }

        .card.panel-warning .card-heading .nav.nav-tabs li.active a {
           ...

JavaScript

/* ref: bs5官網(card)component
   bootstrap = 4.3.1  fontawesome = 4.7 vuejs = 2.6.12
   notes: bs5無panel元件了,且官網提供之card使用方式與bs3.7.7有差異,故css與bs3.7.7之版本有差異
*/
var appinstance = new Vue({
            el: '#vapp',
            data: {
                msg: 'test',
                activetab: 1,
            },
            computed: {

            },
            methods: {
                initialize() {
                    this.activetab = 2;
                }
            },
            created() {
                //this.initialize();
            }
        });