How to do the newcomer guide function?

function points

Before the festival, I encountered a requirement: "Newcomer Guidance Effect" guides the main functions of users who use the platform for the first time .
The specific guidance path is: click the "Add button", explain the pop-up content, guide the user to fill in the form, and finally submit the form.

The following is a screenshot of the effect ( interested brothers can implement it by themselves, I use vue + ElementUI ):

1. 
2. 
3. 
4. 

What we migrant workers want is efficiency. We do not produce wheels, we are all wheel porters.

Are there ready-made wheels?

Use a search engine to find solutions.

• github search results
• Sifu search results
• Baidu search results

Common plugins

• introjs

  • vue-introjs
• driver.js
• http://bootstraptour.com/api/
• https://github.com/pulsardev/vue-tour
• https://github.com/shipshapecode/shepherd
• https://github.com/zurb/joyride

accomplish

I tried introjs and driver.js, and finally used introjs to implement, but both libraries have unsatisfactory points .

1. introjs

   1. http://jsrun.net/ERQKp/edit The new button is easy to use, but the input in the pop-up window cannot be clicked. ( It is also possible that elementUI is poisonous )
      I ended up using pointer-events: none;user-select: none; + state in boot to do it myself.
   2. Does not support next callback, does not support delay control.
      I finally divided the guide into two steps to implement, manually implementing the delay logic

2. driver.js

   1. When http://jsrun.net/PmQKp/edit seems to pop up, the hierarchy is wrong. I was immediately numb.

Of course, even if it is so difficult, there is a way. Introjs implementation case: http://jsrun.net/KAQKp/edit , although compatibility may be worrying .

Dismantling function points

Although there are plugins, we can also see how to implement it. Let's break it down

1. Highlight function & mask function

   1. fixed + z-index level
   2. box-shadow
   3. border + displacement
2. Get the element position for easy positioning
3. Callbacks such as the previous step and the next step are convenient for processing logic.

Highlight function & mask function

https://jsrun.net/cRQKp/edit
You can see that it is basically satisfied, but the bottom is still clickable. And there are no layers .

The layering function is achieved by adding a mask layer, so that the event can be blocked. https://jsrun.net/duQKp/edit

But there is still a problem here. z-index cannot exceed parent . So we need to add multiple layers to circumvent this problem.

Get element position popper positioning

We can use some third-party libraries to implement the function of popper

1. popper.js
   https://jsrun.net/duQKp/edit Soon we achieved what we wanted.

2. Implemented by offsetParent and recursive parentNode.

   1. absolute + event (pageY)

       tooltip.style.position = 'absolute';
           tooltip.style.top = `${e.pageY}px`;
           tooltip.style.left = `${e.pageX}px`;

   2. fixed + event (clientY)

       tooltip.style.position = 'fixed';
           tooltip.style.top = `${e.clientY}px`;
           tooltip.style.left = `${e.clientX}px`;

   3. absolute + recursive offset

       const getOffestValue = function getOffestValue(el, offsetLeft="offsetLeft"){
           if(!el) return 0;
           return el[offsetLeft] + (getOffestValue(el.offsetParent, offsetLeft) || 0)
       }
      
      
       tooltip.style.position = 'absolute';
       tooltip.style.top = `${getOffestValue(el, 'offsetTop') - 30}px`;
       tooltip.style.left = `${getOffestValue(el) - 20}px`;

      4. fixed + getBoundingClientRect

       const {x,y} = el.getBoundingClientRect()
          tooltip.style.position = 'fixed';
          tooltip.style.top = `${y - 30}px`;
          tooltip.style.left = `${x - 30}px`;

callback logic

Can be thrown via bus or $emit.