mint-ui —— navbar的使用

本文介绍如何在 Vue 项目中使用 Mint UI 的导航栏组件,包括按需引入和全局导入的方式,并通过一个具体示例展示了导航栏及标签页的配置与交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


Import

按需引入:

import { Navbar, TabItem } from 'mint-ui';

Vue.component(Navbar.name, Navbar);

Vue.component(TabItem.name, TabItem);

 

全局导入:全局导入后不用再导入

importMintfrom'mint-ui'

import'mint-ui/lib/style.css'

Vue.use(Mint);

 

 

 

API



 

 

示例

示例一:

xxx.vue

<template>
  <div class="page-navbar">
    <div class="page-title">Navbar</div>
    <!-- navbar -->
    <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item id="1">选项一</mt-tab-item>
      <mt-tab-item id="2">选项二</mt-tab-item>
      <mt-tab-item id="3">选项三</mt-tab-item>
    </mt-navbar>

    <div>
      <mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>
    </div>

	<!-- tabcontainer -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <mt-cell v-for="n in 10" :title="'内容 ' + n" />
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-cell v-for="n in 4" :title="'测试 ' + n" />
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <mt-cell v-for="n in 6" :title="'选项 ' + n" />
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
export default {
  name: 'page-navbar',

  data() {
    return {
      selected: '1'
    };
  }
};
</script>

show

 

点击选项二

 

 

demo链接:http://download.youkuaiyun.com/detail/michael_ouyang/9915075
使用前输入命令:
npm install
npm run dev

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值