Keep-alive uses show-overflow-tooltip toggling routes to avoid the tooltip disappearing

This is the 7th day of my participation in the August Text Challenge.More challenges in August

background

First requirement

Whether on mobile or PC, there are some scenarios where you need to cache data.

For example, in a data display page, this is a tableList, and when the user clicks on a row of data, it goes to the details page of that row. When the user returns to the data display page, we hope to help the user retain the previous page state, such as: the entered filter criteria, the number of pages of the current table jump, etc.

Back in the days of jQuery, we had a couple of ways to do this

1. Add a global cache to cache the data
2. Concatenate various cached data onto the URL
3. Put it in local storage

These methods are essentially the same, requiring the user to re-render the state of the page when the data display page is returned.

For Vue, of course, there are better poses to meet this need. Vue provides the built-in keep-Alive component to help us do this.

When we need to cache a table, we just need to

<transition>
    <keep-alive>
        <component :is="view"></component>
    </keep-alive>
</transition>
Copy the code

Super simple?

Second requirement

Now, some of the data in this table is too long to fit in a single table. For example, this url with parameters: https://www.baidu.com/link?url=tsptvz-cU2m2HFPFwje315C6Y8BLh0nPi5xD8t-RL5S&wd=&eqid=d4c41bfd00026e520000000360af7907

It is unrealistic to expect this URL to be fully displayed in the table.

So a lot of UI frameworks provide a feature called show-overflow-tooltip. For example, vue-based elementUI provides a property called show-overflow-tooltip. Displays tooltips when the table is too long and hidden.

So a look, the front is quite simple ha, standing on the shoulders of giants, as expected take in all the mountains small.

The problem

Then, one day, one of the testers mentioned a bug, saying that when she went from the data display page to the details page, the tooltip didn’t disappear, it was shiny.

What? ! Open the test environment and see which rogue is trying to harm me.

Looking back at the time of the problem and git’s submitted comments, it happened after I added keep-alive.

I then tested the problem using keep-alive and show-overflow-tooltip together. Search the project’s Github and it turns out I’m not the only one

Although the problem was found, but not followed by a solution, alas

Analysis of the

Show-overflow-tooltip actually generates a tooltip prompt that is loaded under the body.

When a component is destroyed, its display property is assigned to None to achieve the hiding effect.

When we use keep-alive to cache components in our code, tooltip tooltips are not automatically hidden because the component is not destroyed, even if the route has jumped.

After scrolling through Github, StackOverflow, and Google, I couldn’t find an effective solution and, frustrated, I decided to go for the simplest solution

To solve

I decided to just use JS to hide this annoying tooltip.

A component wrapped in a keep-alive component invokes the activated and deactivated lifecycle hook methods when it is switched.

Activated is called when the cache component is activated, and deactivated is called when the route is diverted to another component

So, the code could be written like this

import { Vue, Component } from 'vue-property-decorator'

const forEach = function (array, callback, scope) {
  for (let i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i])
  }
}

@Component
export default class MyComponent extends Vue {
  deactivated() {
    const myNodeList = document.querySelectorAll('.el-tooltip__popper')
    forEach(myNodeList, function (index, value) {
      value.style.display = 'none'
    }, null)}}Copy the code

This code means that when the route is about to leave, look for all el-tooltip__popper and set its display property to None.

Ha, ha, ha, ha, ha, ha.

After the change, change the bug status to fixed on JIRA, and leave a message asking the test sister to have dinner

Test abuse me thousands of times, I want to test such as first love, every bug written by hand, are buried for candlelight dinner foreshadowing ~