1. What is popover and what are the difficulties

  • Click on a card, also known as a bubble card
  • The difficulty lies in the styling of CSS

2. How will users use it

// The first way, <g-popover> <template slot="content"> <div></div> </template> <template slot="trigger"> </template> </g-popover> <div ref=" XXX ">< div> <button v-popover="$refs. XXX "></button>Copy the code

3. Why use inline-block so that multiple popover components don’t line up

// 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 content 1</div> </template> </button> <g-popover> <template slot="content"> <div> </template> </button> </g-popover> </div>Copy the code

4. A good front-end CSS is always 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>Copy the code

5. Start to improve the function, and the content disappears after the implementation point

// eventListener is created when the user clicks on it, instead of when the user clicks on it. Methods: {XXX (){this.visible =! Enclosing the visible console. The log (' switching visible) if (this. Visible = = = true) {document. Body. AddEventListener (' click ', ()=>{this.visible = false console.log(' Hit body to close popover')})}}} // This bug is solved asynchronicallyCopy the code

6. The third click doesn’t work

  • The first step
If (this. Visible = = = true) {/ / write / / not enclosing $nextTick (() = > {/ / document. AddEventListener (' click ', ()=>{// this.visible = false // console.log(" go to click") // console.log(this.visible); // }) // }) setTimeout(()=>{ document.addEventListener('click', ()=>{this.visible = false console.log(" enter click") console.log(this.visible); })})}Copy the code
  • The second step
methods: { xxx(){ this.visible = ! This.visible if(this.visible === true) {setTimeout(()=>{console.log(" New Document click listener ") document.addEventListener('click', function x(){ this.visible = false; The console. The log (' remove listeners') document. The removeEventListener (' click 'x) / / but this sentence has a problem, I remove x, is not I binding, I bound is x, bind after this new function, Console. log(' hit body to close popover')}.bind(this))})}} // There is a pit in this because x() x.bind() will become a new function,Copy the code
  • The third step
methods: { xxx(){ this.visible = ! Log (' Toggles visible') if(this.visible === true) {setTimeout(()=>{let eventHander = ()=>{ this.visible = false; document.removeEventListener('click',eventHander) } document.addEventListener('click', eventHander) }) } } }Copy the code
  1. Solve click popover closed bug, implement the simplest popover
Methods: {XXX (){this.visible =! this.visible if(this.visible === true) { setTimeout(()=>{ let eventHandler = ()=>{ this.visible = false; The console. The log (' document hidden popover) document. RemoveEventListener (' click 'eventHandler)} document.addEventListener('click', EventHandler)})}else{console.log(' VM conceals popover')}}} // We need to prevent bubbling and let the popover event be handled within it. @click.stop="xxx"> <div class="content-wrapper" v-if="visible" @click.stop> <slot name="content"></slot> </div> <slot></slot> </div>Copy the code

8. What has not been implemented so far

  • Users sometimes want to hover display, support for a variety of events
  • If you write a div outside, it will bug with overflow:hidden, which is why other frameworks put popovers outside

Finally, welcome to exchange