造輪子-tab組件(上)

1. 如何解決以前遺留的bug

1. 根據錯誤提示大概肯定緣由，toast.test.js .style 形成。
2. 用二分法找bug究竟是哪個用例出錯。
3. log+分析代碼,mounted和$nextTick是有時間間隙的，獲得緣由測試用例中mount完了以後馬上click,click以後再$nextTick設置高度,因此多是click太快了，此時s當$nextTick的時候，已經toast已經被咱們關掉了，因此沒法設置高度,那麼解決方案就是咱們就須要模擬用戶點擊，200ms後再點擊

// toast.test.js
        setTimeout(()=>{
            closeButton.click()
            expect(callback).to.have.been.called
            done()
        },200)

2. 對tabs進行需求分析,每個組件都要進行四步

1. 需求
2. ui

3. 代碼

   - 先考慮用戶怎麼用
     ```
     // elementUI的使用方法一
     <g-tabs>
         <g-tabs-item label="美女">
             <div>
                 美女相關諮詢
             </div>
         </g-tabs-item>
         <g-tabs-item label="世界盃">
             <div>
                 世界盃相關諮詢
             </div>
         </g-tabs-item>
     </g-tabs>    
   
     // elementUI的使用方法二,加icon
     // 這種使用方法有個問題，tab上加背景色沒辦法加
     <g-tabs>
         <g-tabs-item slot="label">
             <g-icon>  
                 美女相關諮詢
             </g-icon>
         </g-tabs-item>
     </g-tabs>
     
     // 咱們設計的使用方式,這種方式改背景色就很簡單直接在g-tabs-nav上添加就能夠了。
     <g-tabs selected="tab1">
         <g-tabs-nav>
             <g-tabs-item name="tab1"></g-tabs-item>    
             <g-tabs-item name="tab2"></g-tabs-item>    
         </g-tabs-nav>
         <g-tabs-content>
             <g-tabs-pane name="tab1"></g-tabs-pane>
             <g-tabs-pane name="tab2"></g-tabs-pane>
         </g-tabs-content>
     </g-tabs>    
     ```

4. 測試

3. 新建5個組件

// tabs.vue
        // tabs-head
        // tabs-body
        // tabs-item
        // tabs-pane

4. 子組件不能改父組件的值，必定要經過通知父組件，讓父組件來改

// 這麼寫的緣由
    <!-- <g-tabs selected="selectedTab" @update:selected="selectedTab = $event">  -->
    <!-- 這句話是語法糖徹底等價上面一句 -->
    <g-tabs :selected.sync="selectedTab"> 
        <g-tabs-head>
            <g-tabs-item name="woman">
                美女
            </g-tabs-item>
        </g-tabs-head>
        <g-tabs-body>
            <g-tabs-pane name="woman">
                美女相關諮詢
            </g-tabs-pane>
        </g-tabs-body>
    </g-tabs>

5.添加 tabs 相關組件的基本 props，以後開始完善

// tabs.vue
    props: {
        selected: {
            type: String,
            required: true
        }
    },
    direction: {
        type: String,
        default: 'horizontal',
        validator(value){
            return ['horizontal', 'vertical'].indexOf(value) >= 0
        }
    },
    created(){
        // this.$emit('update:selected','xxx')
    }

    // tabs-item.vue
     props: {
      disabled: {
        type: Boolean,
        default: false
      }
    }
    
    // 爲了實現右邊有個按鈕的功能
    // tabs-head
    <div class="tabs-head">
        <slot></slot>
        <slot name="actions"></slot>
    </div>
    // index.html
    <g-tabs :selected.sync="selectedTab">
        <g-tabs-head>
            <template slot="actions">
                <button>設置</button>
            </template>
        </g-tabs-head>
    </g-tabs>