Detailed explanation of the steps to use the vue mint-ui tabbar component

This time I will bring you a detailed explanation of the steps for using the vue mint-ui tabbar component. What are theprecautionswhen using the vue mint-ui tabbar component. Here are actual cases, let’s take a look.

New tabbar.vue

Introduce the component into the page where you need to use the tabbar component

import tabbar from '../../components/tabbar' export default { components:{tabbar}, data(){ return{ selected:"ShoppingList", tabs:[require("../../assets/images/icon/zhuye.png"),require("../../assets/images/icon/icon42-1.png"), require("../../assets/images/icon/weuquan1.png"),require("../../assets/images/icon/huijia.png")], } }, }

html

Supplement:

mint-ui ——tabbar example

Import

Import on demand:

import { Tabbar, TabItem } from 'mint-ui'; Vue.component(Tabbar.name, Tabbar); Vue.component(TabItem.name, TabItem);

Global import: No need to import again after global import

importMintfrom'mint-ui' import'mint-ui/lib/style.css' Vue.use(Mint);

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of JS Baidu search box effect function implementation case

Implementing web front-end internationalization based on jQuery.i18n change

The above is the detailed content of Detailed explanation of the steps to use the vue mint-ui tabbar component. For more information, please follow other related articles on the PHP Chinese website!