Complete step record of vue encapsulation TabBar component

Implementation ideas:

Step 1: Component encapsulation of TabBar and TabBarItem

At this point, you can find that the basic layout of the page has been implemented, but the active state of the item click has not been implemented.

Step 2: Pass the active image to TabBarItem

In order to prevent the replaced content from directly replacing the entire slot, so that the style defined on the slot is also affected by the replacement, it is best to define a div wrapper outside the slot

Step 3: The combination of TabBarItem and routing

Step 4: TabBarItem color control

It is basically completed, but it is found that the repeated click path in the route will result in an error

Cause of error:

This is because the callback format of vue-router ≥ 3.0 is changed to promise. If no error is caught, this kind of error warning will appear in the console.

Solution 1: Downgrade vue-router to version 3.0

npm i vue-router@3.0 -S 

Solution 2:

Rewrite the push and replace methods on the Router prototype chain so that you don't have to add a catch every time you call the method.

Write the following content in main.js:

import Router from 'vue-router'
 
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

If the push modification still does not take effect, you can try the replace method, for example:

const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};

Implemented with font icons

Introducing font icons

use

Summarize

This is the end of this article about vue encapsulation of TabBar component. For more relevant vue encapsulation of TabBar component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!