文档章节

造轮子-tab组件(上)

ories
 ories
发布于 01/27 19:43
字数 600
阅读 89
收藏 0

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>

本文由博客一文多发平台 OpenWrite 发布!

© 著作权归作者所有

ories
粉丝 0
博文 26
码字总数 17394
作品 0
青浦
高级程序员
私信 提问
加载中

评论(0)

Cabloy全栈JS框架微创新之一:不一样的“移动优先 PC适配”

前言 目前流行的前端UI组件库都支持特性。但基于Mobile和PC两个场景的不同用户体验,也往往会实现Mobile和PC两个版本。 PC场景下的Web工程,如大量的,虽然支持Mobile自适应,但其用户体验差...

zhennann
2018/08/10
0
0
css面试题: 手写collapse(折叠)的css/html部分

源码: github.com/any86/any-u… 做一个组件库不难 其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组...

铁皮饭盒
2019/07/17
0
0
React 造轮子系列:Icon 组件思路

简介 本轮子是通过 React + TypeScript + Webpack 搭建的,至于环境的搭建这边就不在细说了,自己动手谷歌吧。当然可以参考我的源码。 这里我也是通过别人学的,主要做些总结及说明造各个轮子...

前端小智
2019/05/22
0
0
HooX: 基于Hook的React状态管理工具

为什么又要造轮子 hook自带轮子光环 关于react hook我就不多介绍了。hook提供了抽象状态的能力,自然而然让人想到可以基于hook抽离全局状态。其天生自带轮子光环,所以社区也出现了不少基于h...

相学长
2019/09/26
0
0
到底是否应该重复造轮子

引言      之所以谈起这个话题,是因为和新公司同事的一次交流。他是LZ当时二面的面试官(以下简称CZ),看过LZ的github,因此知道LZ正在尝试写一个redis的Java客户端。在交流的过程中,...

zuoxiaolong8810
2017/03/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

充值订单

充值订单 充值订单 1、用户登录到前台,可对个人账户充值2、点击充值进入支付页面,选择其中一种方式进行支付 3、打开后台-订单-充值订单,可根据下单时间、订单编号、充值用户来进行搜索。...

Geek-Chic
10分钟前
24
0
2.1 思科操作系统入门

cisco ios系统入门 IOS的存储和使用 IOS存储在Flash中,Flash属于非易失性存储,断电时不会丢失。 一台设备可用于存储多个版本的IOS,可以根据需要更改或者覆盖。 设备开机时,将IOS从Flash...

theyhq
14分钟前
23
0
String.format()占位符替换

作用:使用指定的格式字符串和参数返回一个格式化字符串。 str=String.format("Hi,%s %ss", "你好","java"); 常用的类型关系:

谷亚彬
32分钟前
34
0
作为HR,校招人才测评用什么工具好?

校招是一个直接面对众多优秀求职者的机会,是企业储备人才的宝地。每年大量的企业投身于校招的队伍中。 以前都是知名大企业进校园 如今....好像不限制了。 一次校招,我们大约能收到200多个简...

蛤蟆丸子
35分钟前
28
0
Dynamic Wallpaper for Mac(精美的动态壁纸) v3.5

Dynamic Wallpaper for Mac是一款功能强大的动态壁纸应用。动态壁纸应用 Mac版为你提供200+精美视频素材,卡通动漫、自然人文、萌宠萌物、游戏世界、创意视频、古风古色等等。 Dynamic Wall...

云不若
46分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部