mint ui 学习笔记（1）

Mint UI

基于 Vue.js 的移动端组件库

官方网站：http://mint-ui.github.io/#!/zh-cn

快速开始

安装 Mint UI

// 安装
# Vue 2.0
npm install mint-ui -S

然后在项目中的main.js文件引入所有组件

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

在项目中的main.js文件引入mint-ui的样式

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

Tabbar

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>

在mt-tab-item上添加点击事件的方法：（添加.native）

<mt-tab-item id="1" @click.native="直接添加点击事件无效">选项一</mt-tab-item> 这样可以生效

tabber固定在底部

<mt-tabbar fixed>