1. 如何解决之前遗留的bug
- 根据错误提示大概确定原因，toast.test.js .style 造成。
- 用二分法找bug到底是哪一个用例出错。
- log+分析代码,mounted和
nextTick设置高度,所以可能是click太快了，此时s当$nextTick的时候，已经toast已经被我们关掉了，所以无法设置高度,那么解决方案就是我们就需要模拟用户点击，200ms后再点击
// toast.test.js
setTimeout(()=>{
closeButton.click()
expect(callback).to.have.been.called
done()
},200)
2. 对tabs进行需求分析,每一个组件都要进行四步
- 需求
- ui
- 代码
- 先考虑用户怎么用
// 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>
- 测试
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>
