1. popover是什么以及难点在哪
- 点一下出现一个卡片,也叫气泡卡片
- 难点在于css的样式
2. 用户会怎么去用
// 第一种做法，用插槽做
<g-popover>
<template slot="content">
<div></div>
</template>
<template slot="trigger">
<button>点我</button>
</template>
</g-popover>
// 第二种做法，用指令做，这种方式不太用，指令大多数是造轮子用的所以就用第一种方法做
<div ref="xxx"></div>
<button v-popover="$refs.xxx"></button>
3. 为什么要用用inline-block，因为这样多个popover组件才不会一行
// popover.vue
<template>
<div class="popover">
<slot name="content"></slot>
<slot></slot>
</div>
</template>
.popover{
display: inline-block;
vertical-align: top;
}
// index.html
<div id="app">
<g-popover>
<template slot="content">
<div>popover内容1</div>
</template>
<button>点我1</button>
</g-popover>
<g-popover>
<template slot="content">
<div>popover内容2</div>
</template>
<button>点我2</button>
</g-popover>
</div>
4. 优秀的前端css一定是写的很6的
// popover.vue
<template>
<div class="popover" @click="xxx">
<div class="content-wrapper" v-if="visible" >
<slot name="content"></slot>
</div>
<slot></slot>
</div>
</template>
<script lang="ts">
export default {
name: "GuluPopover",
data (){
return {visible:false}
},
methods: {
xxx(){
this.visible = !this.visible
}
}
}
</script>
<style lang="scss" scoped>
.popover{
display: inline-block;
vertical-align: top;
position: relative;
.content-wrapper{
position: absolute;
bottom: 100%;
left: 0;
border: 1px solid red;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
}
</style>
5. 开始完善功能,实现点外面之后内容消失
// 这样写会出现bug,刚出现外面就会点击，也就是刚开启就会关闭
// 出现原因是点击的时候就建了eventListener,而不是出现了再建eventListener
// 具体涉及到原生js的一些核心，叫做事件机制，事件的冒泡机制
methods: {
xxx(){
this.visible = !this.visible
console.log('切换 visible')
if(this.visible === true) {
document.body.addEventListener('click', ()=>{
this.visible = false
console.log('点击body就关闭popover')
})
}
}
}
// 这个bug用异步解决
6.解决第三次点击不行
- 第一步
if(this.visible === true) {
// 这样写还是不行
// this.$nextTick(() => {
// document.addEventListener('click', ()=>{
// this.visible = false
// console.log("进入click")
// console.log(this.visible);
// })
// })
setTimeout(()=>{
document.addEventListener('click', ()=>{
this.visible = false
console.log("进入click")
console.log(this.visible);
})
})
}
- 第二步
methods: {
xxx(){
this.visible = !this.visible
if(this.visible === true) {
setTimeout(()=>{
console.log("新增 document click 监听器")
document.addEventListener('click',
function x(){
this.visible = false;
console.log('删除监听器')
document.removeEventListener('click',x)
// 但是这句话有问题，我删除的x，并不是我绑定的,我绑定的是x,bind this之后的新函数，
console.log('点击body就关闭popover')
}.bind(this)
)
})
}
}
}
// 这样写也有个坑,原因是
x()
x.bind()会变成一个新的函数,
- 第三步
methods: {
xxx(){
this.visible = !this.visible
console.log(this.visible)
console.log('切换 visible')
if(this.visible === true) {
setTimeout(()=>{
let eventHander = ()=>{
this.visible = false;
document.removeEventListener('click',eventHander)
}
document.addEventListener('click', eventHander)
})
}
}
}
- 解决点击popover关闭的bug,实现最简单的popover
// 通过以下代码发现vm 隐藏了一次popover，document隐藏了一次 methods: { xxx(){ this.visible = !this.visible if(this.visible === true) { setTimeout(()=>{ let eventHandler = ()=>{ this.visible = false; console.log('document 隐藏 popover') document.removeEventListener('click',eventHandler) } document.addEventListener('click', eventHandler) }) }else{ console.log('vm 隐藏 popover') } } } // 所以需要阻止冒泡,让popover事件在其内部进行处理就可以了 <div class="popover" @click.stop="xxx"> <div class="content-wrapper" v-if="visible" @click.stop> <slot name="content"></slot> </div> <slot></slot> </div>
8. 目前还有哪些没有实现
- 用户有的时候希望是hover的时候显示，支持多种事件
- 假设在外面写一个div，有overflow:hidden的属性就会出bug，这就是其它的框架都把popover放外面的原因
最后，欢迎交流
<img src="https://i.loli.net/2020/01/27/gS4ZwP6zfAvULYT.jpg" alt="微信" width="400" height="400" align="bottom" />
