1. 解决小三角形引起的抖动问题。
// 以一个为例
&.position-bottom {
margin-top: 10px;
&::before, &::after{
left: 10px;
}
&::before {
border-top: none;
border-bottom-color: black;
/*border-color: black;*/
bottom: 100%;
}
&::after {
border-top: none;
border-bottom-color: white;
/*border-color: black;*/
bottom: calc(100% - 1px);
}
}
2. 实现关闭功能，用 slot-scope,把 close 传给插槽
// popover.vue
// 第一步在slot上传一个属性
<slot name="content" :close="close"></slot>
// 第二步结构一下close，然后用就可以了
// index.html
<g-popover position="bottom">
<template slot="content" slot-scope="{close}">
<div><g-button @click="close">关闭</g-button></div>
</template>
<g-button>点我1</g-button>
</g-popover>
3. popover 的第一个测试用例-position
it('可以设置position.', (done) => {
Vue.component('g-popover', Popover)
const div = document.createElement('div')
document.body.appendChild(div)
div.innerHTML = `
<g-popover position="bottom" ref="a">
<template slot="content">
弹出内容
</template>
<button>点我</button>
</g-popover>
`
const vm = new Vue({ // 这个vm不是组件，这个vm是一个div对应的实例,div里面才是popover组件
el: div
})
vm.$el.querySelector('button').click()
vm.$nextTick(() => {
const {contentWrapper} = vm.$refs.a.$refs
expect(contentWrapper.classList.contains('position-top')).to.be.false
done()
})
})
4. 测试 mouseEnter 事件
- 先确认用 dispatchEvent 的方式是可以触发 hover 事件的
<body>
<div id=xxx>
hihihi
</div>
<button style="marin-top:20px;" id=button>click me</button>
</body>
xxx.addEventListener('mouseenter',function(){
console.log('hi')
})
button.onclick=function(){
let event = new Event('mouseenter');
xxx.dispatchEvent(event)
}
-
可以设置 trigger 的测试用例有问题，先跳过,it 前面+一个 x 可以跳过
xit('可以设置 trigger.', (done) => { Vue.component('g-popover', Popover) const div = document.createElement('div') document.body.appendChild(div) div.innerHTML = ` <g-popover trigger="hover" ref="a"> <template slot="content"> 弹出内容 </template> <button>点我</button> </g-popover> ` const vm = new Vue({ // 这个vm不是组件，这个vm是一个div对应的实例,div里面才是popover组件 el: div }) let event = new Event('mouseenter'); vm.$el.dispatchEvent(event) vm.$nextTick(() => { const {contentWrapper} = vm.$refs.a.$refs expect(contentWrapper).to.be.exist done() }) })
最后,个人微信,欢迎交流！
wechat0.jpg
网友评论