继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

造轮子-tab组件(上)

慕仰4546411
关注TA
已关注
手记 21
粉丝 2
获赞 13

1. 如何解决之前遗留的bug

  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)

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>
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP