Vue js styling請教

CloudLink.asia

本帖最后由 CloudLink.asia 于 2017-2-26 21:18 编辑

各位Vue大神，請問只用一個component怎樣做到轉style的效果? 目前用了笨笨的方法創建兩個不同的component，根據route path輸出指定的component

template:
[ol]

[/ol]复制代码

script:
[ol]

method: {   

     checkNavbar() {

        if (this.$route.fullPath === "/"){

          this.navType = 'app-navbar-inverse';

        }else{

          this.navType = 'app-navbar';

        }

    }

}[/ol]复制代码

需要被改的CSS
[ol]

        .navbar{

                -webkit-transition: all 0.6s ease-out;

                -moz-transition: all 0.6s ease-out;

                -o-transition: all 0.6s ease-out;

                -ms-transition: all 0.6s ease-out;

                transition: all 0.6s ease-out;

                height: 80px;

                padding-top: 17px;

        }

        .navbar-inverse .navbar-nav>.active>a {

                background: transparent;

        }

        .navbar-inverse .navbar-nav {

                font-size: 20px;

                text-transform: uppercase;

        }

        .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{

                background-color: #2c3e50;

                color: white !important;

        }

        .navbar-inverse .navbar-collapse{

                border-color: #eee;

        }

        .navbar-inverse .navbar-nav .open .dropdown-menu .divider {

            background-color: #eee;

        }

        .navbar-fixed-top .navbar-inner {

            -webkit-border-radius: 0;

            -moz-border-radius: 0;

            border-radius: 0;

        }

        .title{

                letter-spacing: 5px;

                font-size: 30px;

        }

        @media (max-width: 950px) {

            .navbar-header {

                float: none;

            }

            .navbar-left,.navbar-right {

                float: none !important;

            }

            .navbar-toggle {

                display: block;

            }

            .navbar-collapse {

                border-top: 1px solid transparent;

                box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

            }

            .navbar-fixed-top {

                top: 0;

                border-width: 0 0 1px;

            }

            .navbar-header{

                        padding-left: 20px;

                }

            

            .collapse.in{

                    margin-top: 12px;

            }

            

            .collapsing, .in {

                    background-color: white;

                    margin-top: 12px;

            }

                .collapsing ul li a, .in ul li a {color: black!important;}

                .collapsing ul li a:hover, .in ul li a:hover {color: rgb(157,155,159)!important;}

            .navbar-collapse.collapse {

                display: none!important;

            }

            

            .navbar-nav>li {

                float: none;

            }

            .navbar-nav>li>a {

                padding-top: 10px;

                padding-bottom: 10px;

            }

            .collapse.in{

                display:block !important;

            }

        }

        /* Customize Navbar Start */

        .navbar-inner {

                background: transparent;

                border-color: transparent;

        }

        .navbar-inverse .navbar-nav>.active>a {

                background: transparent;

        }

        .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover{

                color:black;

        }

        .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{

                color: #b0afb2;

        }

        .navbar.scrolled {

                background: rgba(38, 50, 56, 0.95);

        }

        .navbar .nav > li > a {

                color: white;

        }

        .navbar-inverse .navbar-brand{

                color: white;

        }

        .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover{

                color: white;

        }

        .navbar-inverse .navbar-toggle{

                border-color: white;

        }

        .navbar-inverse .navbar-toggle .icon-bar{

                background-color: white;

        }

[/ol]复制代码

Home




Login

yjsx86

前端不懂

狗仔小分队

楼主大触

呵呵

你的意思是两个结构完全相同的组件，现在希望不同的route执行不同的style风格？给CSS创建两个“命名空间”就行了。

CloudLink.asia

呵呵 发表于 2017-2-26 21:31

你的意思是两个结构完全相同的组件，现在希望不同的route执行不同的style风格？给CSS创建两个“命名空间” ...
對, 大概要怎樣寫

LoNEFA

看见代码我就想睡觉

qfdk

我感觉啊 你用v-if 之类的判断一下，里面弄个参数比如是红色传入红色的
不是红色的 传去别的就好。感觉route path 不明智啊，或者用computed

呵呵

CloudLink.asia 发表于 2017-2-26 21:40

對, 大概要怎樣寫
//css
.parent{
    color: #f00;
}

.parent.child1{
    color: #0f0;
}

.parent.child2{
    color: #00f;
}

//html

    雷猴！


//js
if (module == 'child1') {
    document.body.classList.add('child1');
}

if (module == 'child2') {
    document.body.classList.add('child2');
}