-Tab create the wheel assembly (on)

1. How to resolve remaining before the bug

1. Probably determine the cause of the error prompt, toast.test.js .style cause.
2. Find the bug with a dichotomy in the end is what a use case error.
3. log + analysis code, and $ nextTick Mounted is a time gap, click obtained immediately after the test case mount over reason, then $ nextTick after the click to set the height, it may be too fast click, then when s $ nextTick time, we had toast has been turned off, so I can not set the height, then the solution is we need to simulate user clicks, 200ms and then click

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

2. tabs needs analysis, each component should be carried out in four steps

1. demand
2. ui
3. Code

   • First consider how users use

     // 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. test

3. Create assembly 5

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

4. The subassembly can not change the value of parent element, parent notification must pass assembly, so that changes to the parent component

    // 这么写的原因
    <!-- <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. Add tabs basic props related components, after perfect start

    // 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>