Shulou(Shulou.com)06/02 Report--

This article mainly shows you "vue how to encapsulate TabBar components", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "vue how to encapsulate TabBar components" this article.

The idea of realization is:

Step 1: component encapsulation of TabBar and TabBarItem

By doing this, you can find that the basic layout of the page has been implemented, but the click active state of item has not been realized yet.

Step 2: pass the active image to TabBarItem

In order to prevent the replacement content from directly replacing the slot, so that the styles defined on the slot are also affected, it is best to define a div package outside the slot.

Step 3: the combined effect of TabBarItem and routing

Step 4: color control of TabBarItem

Basically complete, but an error will be reported if you click on a duplicate path in the route.

Reason for reporting an error:

Because the callback format of the version of vue-router ≥ 3.0 is changed to promise, if no error is caught, such an error warning will appear in the console.

Workaround 1:vue-router downgraded to version 3.0

Npm I vue-router@3.0-S

Solution 2:

Override the push and replace methods on the Router prototype chain so that you don't have to add catch every time the method is called.

Write the following in main.js:

Import Router from 'vue-router' const originalPush = Router.prototype.pushRouter.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 modification to push still doesn't 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);}; use font icon to implement incoming font icon

Use

The above is all the content of the article "how vue encapsulates TabBar components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.