摘要：第十一集從零開始實現(xiàn)切換組件本集定位我們先來聊聊切換的意義不管是手機(jī)還是屏幕的大小是有限的人眼睛看到的范圍也是有限的人們看信息的時候并不喜歡跳轉(zhuǎn)這種操作或是我們要查某個知識點(diǎn)進(jìn)入網(wǎng)站之后看了幾眼沒有需要的相關(guān)信息也就理所當(dāng)然的退出去繼續(xù)搜索

本集定位:
我們先來聊聊 tab 切換的意義, 不管是手機(jī)還是pc, 屏幕的大小是有限的, 人眼睛看到的范圍也是有限的, 人們看信息的時候并不喜歡"跳轉(zhuǎn)"這種操作, 或是我們要查某個知識點(diǎn), 進(jìn)入網(wǎng)站之后, 看了幾眼沒有需要的相關(guān)信息也就理所當(dāng)然的退出去繼續(xù)搜索了, 而有時某些我們想要的知識點(diǎn)可能在網(wǎng)站的底部, 但人們是有瀏覽習(xí)慣的, 這就需要在第一眼看到的區(qū)域里面, 盡可能多的展示"關(guān)鍵詞"與"關(guān)鍵信息", tab正是解決了如何"擴(kuò)大"有限的空間這一問題.

tab組件與其他組件不同, 他需要至少兩個組件來配合完成功能,寫三個組件使用起來很討人厭, 只寫一個組件, 不管是語義化還是書寫方式上都太差了, 參考element的設(shè)計本次我們也是采用的雙組件,編寫上他與單一的組件不同的地方就是, 它涉及到兩個組件之間的通訊問題.

兩部分組成, 上部是標(biāo)題的展示, 下部根據(jù)選中狀態(tài)進(jìn)行展示內(nèi)容

標(biāo)題要有明確的激活狀態(tài)

為了性能, 內(nèi)容展示不可以使用v-if

像這種包裹型的組件, 不允許干擾用戶的任何操作, 比如不可以有.stop修飾符

使用方法應(yīng)如下

我以cc-tab為包裹組件的父級標(biāo)簽
cc-tab-pane為每一個展示內(nèi)容的標(biāo)簽

 
      1號的內(nèi)容
      2號的內(nèi)容
      3號的內(nèi)容
 

預(yù)期效果:

vue-cc-ui/src/components/Tab/index.js

import Tab from "./main/tab.vue"
import TabPane from "./main/tab-pane.vue"

Tab.install = function(Vue) {
  Vue.component(Tab.name, Tab);
  Vue.component(TabPane.name, TabPane);
};

export default Tab

容器組件
vue-cc-ui/src/components/Tab/main/tab.vue

vue-cc-ui/src/components/Tab/main/tab-pane.vue
只負(fù)責(zé)展示與提供組件的參數(shù)給容器

容器組件他還要接收參數(shù)

label 也就是tab顯示的標(biāo)簽名 (給用戶看的)

name 也就是當(dāng)點(diǎn)擊時, 此標(biāo)簽的id (給開發(fā)用的)

這兩個分開設(shè)置還有一個原因, 就是label可以是重復(fù)的, 因為他不是唯一標(biāo)識, name不可重復(fù)

props: {
    label: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },

一. 我們先把導(dǎo)航功能做出來, 讓標(biāo)題顯示出來
在父級的容器里面:

// 個人比較推薦的代碼規(guī)范
// mounted 與 created 這種鉤子, 放在最底部
// 因為他 不會經(jīng)常變動, 他只是負(fù)責(zé)啟動代碼
// 他要符合單一職責(zé), 不允許有具體的邏輯判斷
// 他啟動的函數(shù), 如果有關(guān)初始化的, 必須以"init"作為開頭
mounted() {
    this.initNav();
  }

initNav

initNav() {
// 僅負(fù)責(zé)對每一項的處理
      this.layer(item => {
        let result = {
          label: item.label,
          name: item.name,
          icon: item.icon
        };
        // 放入我們的導(dǎo)航數(shù)組里面
        this.navList.push(result);
      });
    },
    // 原理與map, reduce, 這類函數(shù)一樣, 
    // 每一步操作 都會吐給用戶
    layer(task) {
      this.$slots.default.map(item => task(item.componentInstance));
    }

解釋一下:

this.$slots : 得到這個父級容器內(nèi)的所有插槽元素的一個對象, 例如：v-slot:foo 中的內(nèi)容將會在 vm.$slots.foo 中被找到, default 屬性包括了所有沒有被包含在具名插槽中的節(jié)點(diǎn)，或 v-slot:default 的內(nèi)容。

上面循環(huán)this.$slots.default 獲取到的每一個item就是"節(jié)點(diǎn)元素",為什么打上"", 因為這個節(jié)點(diǎn)是被vue處理過的, 并不是傳統(tǒng)意義上的節(jié)點(diǎn);

componentOptions: 顧名思義,這個組件的一些配置項, 比如listeners未接收的事件, tag標(biāo)簽名, propsData, 而propsData里面包含了我們需要的name 以及 label, 但是他需要 componentOptions.propsData.name才可以取到值.

componentInstance: 組件狀態(tài), 其身上有組件的this上面的參數(shù) 可以直接獲取到 props傳入的值, 比如componentInstance.name 就會取到傳入的name, 上面為什么選他? 就是因為他只要"."一次就可以取到值了, 程序員的本性

上面我們得到了一個用戶傳入子組件的配置匯總, 我們可以循環(huán)展示他

    

      

          // 像這種內(nèi)容的展示, 寫上標(biāo)簽代碼布局上更舒服
        
      
    
    
  

handClick, 點(diǎn)擊事件負(fù)責(zé)把用戶的操作給父級看, 畢竟我們綁定了v-model所以給個input事件,
tab-click是用戶接受的事件

 handClick(e, name) {
      this.$emit("input", name);
      this.$emit("tab-click", e);
      // 這里的更改選擇項需要用 宏任務(wù), 否則測試的時候有顯示不正確的bug
      setTimeout(() => this.initSeleced(), 0);
    },

initSeleced 一個專門做選擇的方法

// 一句話的事
 initSeleced() {
    // 利用我們之前定義好的循環(huán)函數(shù)
    // item就是每一個子組件, 這些子組件數(shù)據(jù)是映射的, 所以可以進(jìn)行修改
    // 當(dāng)子組件的value與激活的name相同時, 組件的展示被激活
      this.layer(item => (item.showItem = item.name == this.value));
    },

子組件

現(xiàn)在我們把核心功能寫完了, 但不要忘記小小的細(xì)節(jié).
初始化選擇

  mounted() {
    this.initNav();
    // 初始階段也要激活一下用戶選擇tab欄
    this.initSeleced();
  }

完善樣式, 比如tab的激活狀態(tài), 激活動畫

tab的不同樣式, 不同風(fēng)格

icon的添加

/vue-cc-ui/src/style/Tab.scss

@import "./common/var.scss";
@import "./common/mixin.scss";
@import "./common/extend.scss";

@include b(tab) {
    @include brother(nav) {
    // 整體的title布局就是不換行的橫向布局
        display: flex;
        flex-wrap: nowrap;
        text-align: center;
        // 提供一條淺色的橫線
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        &>li {
        // 主要就是每一個標(biāo)簽的樣式
            cursor: pointer;
            display: flex;
            position: relative;
            align-items: center;
            border-bottom: none;
            background-color: white;
            padding: 10px 20px;
            transition: all 0.2s;
            &:hover {
            // 給個有好的反饋
                transform: scale(0.8)
            };
                &::after {
                // 這個就是下面的選中橫線, 平時縮放為0, 使用的時候再出現(xiàn)
                    content: "";
                    position: absolute;
                    left: 6px;
                    bottom: 0;
                    right: 6px;
                    transform: scale(0);
                    transition: all 0.2s;
                }
            @include when(active) {
            // 被激活的時候, 會字體變色, 會浮現(xiàn)出橫線
                color: $--color-nomal;
                &::after {
                    border-bottom: 2px solid $--color-nomal;
                    transform: scale(1);
                }
            }
        }
    }
}

添加icon

// 我就簡寫了

          // 傳入name就出現(xiàn), 否則不出現(xiàn)
        
        
      

其他的類型的tab, 把標(biāo)簽包裹起來

效果圖:

允許用戶選擇找這種樣式

相關(guān)樣式也要兼容

@include when(card) {
            &::after {
                display: none
            }
            &>li {
                border-bottom: none;
                border: 1px solid #eee;
                &:hover {
                    transform: scale(1)
                }
            };
            &>li+li {
                border-left: none
            };
            &>.is-active {
                border-bottom: none;
                &::after {
                    content: "";
                    position: absolute;
                    border-bottom: 2px solid white;
                    left: 0;
                    right: 0;
                    bottom: -1px;
                }
            };
            &>:nth-last-child(1) {
                border-top-right-radius: 7px;
            };
            &>:nth-child(1) {
                border-top-left-radius: 7px;
            };
        }

上面的寫法有個技巧就是下面這段
用戶有可能只有一個tab, 你可能會問, 只有一個干么要做tab?? 我只能說, 怎么玩是你的事, 我只負(fù)責(zé)實現(xiàn).
所以在只有一項的時候, 就不能只彎曲他的左上角, 還要讓他的右上角也是有弧度的

// 這兩個選擇器完美解決了問題
// 只有一個的時候, 它既是第一個也是最后一個
&>:nth-last-child(1) {
    border-top-right-radius: 7px;
};
&>:nth-child(1) {
    border-top-left-radius: 7px;
};

至此tab的功能已經(jīng)做完, 總的來說這個tab組件算是cc-ui組件中比較好寫的一個了.

end
大家繼續(xù)一起學(xué)習(xí),一起進(jìn)步, 早日實現(xiàn)自我價值!!
下一集準(zhǔn)備聊聊"評分組件", 也就是選擇小星星的那個, 做起來很有意思的組件,我挺喜歡的.

本套u(yù)i的github地址:github
個人技術(shù)博客: 鏈接