造轮子-tab组件(上)

1. 根据错误提示大概确定原因，toast.test.js .style 造成。
2. 用二分法找bug到底是哪一个用例出错。
3. log+分析代码,mounted和KaTeX parse error: Expected 'EOF', got '是' at position 9: nextTick是̲有时间间隙的，得到原因测试用例…nextTick设置高度,所以可能是click太快了，此时s当$nextTick的时候，已经toast已经被我们关掉了，所以无法设置高度,那么解决方案就是我们就需要模拟用户点击，200ms后再点击

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

1. 需求
2. ui
3. 代码
   • 先考虑用户怎么用

     // elementUI的使用方法一
     
         
      
          美女相关咨询
      
         
         
      
          世界杯相关咨询
      
         
     	
     
     // elementUI的使用方法二,加icon
     // 这种使用方法有个问题，tab上加背景色没办法加
     
         
        
          美女相关咨询
      
         
     
     
     // 我们设计的使用方式,这种方式改背景色就很简单直接在g-tabs-nav上添加就可以了。
     
         
      	
      	
         
         
      
      
         
     	
     

4. 测试

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

    // 这么写的原因
    
    
     
 
     
  美女
     
 
 
     
  美女相关咨询
     
 
    

    // 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
    
 
 
    
    // index.html