NavBar 标签页

介绍

菜单选项卡。

引入

import { NavbarGroup, Navbar } from 'mind-ui-vue';
Vue.use(NavbarGroup);
Vue.use(Navbar);

示例

基础用法

<m-navbar-group v-model="value">
  <m-navbar title="标签1" name="tab1" />
  <m-navbar title="标签2" name="tab2" />
  <m-navbar title="标签3" name="tab3" />
</m-navbar-group>

动态数据渲染

<m-navbar-group v-model="value" @change="onChange">
<m-navbar
  v-for="n in navbars"
  :title="n.title"
  :name="n.name"
  :key="n.name"
  @click="onClick"
/>
</m-navbar-group>

data() {
  return {
    navbars: [],
    value: "",
  }
},
mounted() {
  // 动态设置navbar列表 
  setTimeout(() => {
    for (let i = 0; i < 9; i++) {
      let item = {
        title: "标签" + i,
        name: "tab" + i,
      };
      this.navbars.push(item);
    }
  }, 1000);
},
methods: {
  onClick(detail) {
    console.log("click:", detail);
  },

  onChange(detail) {
    console.log("change:", detail);
  }
},

徽章统计

<m-navbar-group v-model="value" @change="onChange">
  <m-navbar title="标签1" name="tab1" />
  <m-navbar title="标签2" name="tab2" count="8" />
  <m-navbar title="标签3" name="tab3" />
  <m-navbar title="标签4" name="tab4" count="new" />
</m-navbar-group>

Api

NavbarGroup Props

参数	说明	类型	可选值	默认值
v-model v1.1.0	默认选中的标签	String	—	—
acive-name 后续版本将移除	默认选中的标签	String	—	—
acive-color	选中标签的文字颜色	String	—	—
line-width	选中底线长度，单位 px	Number	—	与当前标签等宽
line-height	底线高度，单位 px, 0 时不展示	Number	—	与当前标签等宽
line-color	选中底线颜色	String	—	—
disabled	禁止点击	Boolean	—	fasle

Navbar Props

参数	说明	类型	可选值	默认值
name	标签名称，唯一、必填，change 事件中返回	String	—	—
title	标题	String	—	—
count	徽章值	Number、String	—	—

NavbarGroup Events

名称	说明	返回值
change	标签激活后触发	标签对应的 name 值

Navbar Events

名称	说明	返回值
click	点击标签时触发	标签对应的 name 值