Home > Web Front-end > JS Tutorial > body text

vue mint-ui tabbar is used as a component

不言
Release: 2018-05-04 14:57:31
Original
1907 people have browsed it

This article mainly introduces how to use the vue mint-ui tabbar variable component and the example code. It is very good and has reference value. Friends in need can refer to it

New tabbar.vue

<template>
 <mt-tabbar v-model="message" fixed>
    <mt-tab-item id="MainPage">
      <img slot="icon" :src="this.atabs[0]">
      主页
    </mt-tab-item>
    <mt-tab-item id="ShoppingList">
      <img slot="icon" v-bind:src="this.atabs[1]">
      积分商城
    </mt-tab-item>
    <mt-tab-item id="GroupList">
      <img slot="icon" v-bind:src="this.atabs[2]">
      微社区
    </mt-tab-item>
    <mt-tab-item id="UserCenter">
      <img slot="icon" v-bind:src="this.atabs[3]">
      我的
    </mt-tab-item>
  </mt-tabbar>
</template>
<script>
export default {
  data(){
    return{
    //选中的tabbar值message为外面页面传入的值selected
      message:this.selected,
    //这里使用的icon图标为图片,所以需要加图片改变的传入,若使用阿里图标,则不用加
      atabs:this.tabs,
    }
  },
  props:{
    selected: String,
    tabs:Array,
  },
  watch: {
    message: function (val, oldVal) {
      // 这里就可以通过 val 的值变更来确定去向
      switch(val){
        case &#39;MainPage&#39;:
          this.$router.push(&#39;/mainpage&#39;);
        break;
        case &#39;ShoppingList&#39;:
          this.$router.push(&#39;/shoppinglist&#39;);
        break;
        case &#39;GroupList&#39;:
          this.$router.push(&#39;/grouplist&#39;);
        break;
        case &#39;UserCenter&#39;:
          this.$router.push(&#39;/usercenter&#39;);
        break;
      }
    }
  },
}
</script>
Copy after login

Introduce the component on the page that needs to use the tabbar component


import tabbar from &#39;../../components/tabbar&#39;
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")],
     }
  },
}
Copy after login

html

<tabbar :selected="selected" :tabs=&#39;tabs&#39;></tabbar>
Copy after login

Supplement:

mint-ui —— tabbar example

Import

Introduction on demand:

import { Tabbar, TabItem } from &#39;mint-ui&#39;;
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
Copy after login

Global import: No need to import again after global import

importMintfrom&#39;mint-ui&#39;
import&#39;mint-ui/lib/style.css&#39;
Vue.use(Mint);
Copy after login

Related recommendations:

Detailed explanation of the steps to develop mpvue framework with Vue.js



The above is the detailed content of vue mint-ui tabbar is used as a component. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template