mint ui 学习笔记（1）

墨蓝 2022-12-29 00:30 58阅读 0赞

### Mint UI ###

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

官方网站：[http://mint-ui.github.io/\#!/zh-cn][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>

[http_mint-ui.github.io_zh-cn]: https://note.youdao.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，58人围观）

还没有评论，来说两句吧...

相关阅读

相关 mint ui 学习笔记（1）

Mint UI 基于 Vue.js 的移动端组件库官方网站：[http://mint-ui.github.io/\!/zh-cn][http_mint-ui.gith

墨蓝/ 2022年12月29日 00:30/ 0 赞/ 59 阅读

相关 vue中mint-ui使用

mint-ui 如何按需引入 cnpm i mint-ui -S 注意：npm下载出现问题（终端中出现Error红色提示，就得重新下载），用cnpm替换npm

骑猪看日落/ 2022年11月27日 03:17/ 0 赞/ 121 阅读

相关 Mint-ui MessageBox.confirm

Mint-ui MessageBox.confirm 问题: 官方文档写法只能获取点击确认后的状态，默认点击取消报错 MessageBox.confirm(

本是古典何须时尚/ 2022年06月16日 04:53/ 0 赞/ 148 阅读

相关 Mint-ui MessageBox.prompt配置

Mint-ui 弹框配置官方文档描述不清晰，复制粘贴效果不理想，最后看源码，找配置解决 MessageBox.prompt('请输入姓名').then((

朴灿烈づ我的快乐病毒、/ 2022年06月16日 04:12/ 0 赞/ 105 阅读

相关 vue引入Mint-UI

Mint-UI是Vue的一个移动端组件库。中文官网：[http://mint-ui.github.io/\!/zh-cn][http_mint-ui.g

「爱情、让人受尽委屈。」/ 2022年06月12日 03:27/ 0 赞/ 147 阅读

相关 vue mint-ui 使用手册

npm 安装推荐使用 npm 的方式安装，它能更好地和 [webpack][] 打包工具配合使用。 npm i mint-ui -S CDN 目前可以

骑猪看日落/ 2022年06月08日 14:51/ 0 赞/ 217 阅读

相关 mint-ui的学习入门实例

今早上看了一下mint-ui，官网看的虽然不是完全学会使用，但是通过自己百度了解，现在已经可以掌握对mint-ui的基本使用，下面是我自己练习的一些小案例集合，仅供参考，代码如

谁借莪１个温暖的怀抱￠/ 2022年05月30日 04:28/ 0 赞/ 137 阅读

相关 Mint UI搭建环境

-------------------- 官网：[https://mint-ui.github.io/\!/zh-cn][https_mint-ui.github.io

ゝ一纸荒年。/ 2022年01月29日 08:43/ 0 赞/ 176 阅读

相关记录使用mint-ui的感想

[mint-ui][] 今天记录一下使用mint-ui的心得，首先说明一下mint-ui是用来做手机端界面的ui库，这个ui库我是做项目的时候使用到了，所以今天简单的说明

待我称王封你为后i/ 2021年11月05日 04:54/ 0 赞/ 261 阅读

相关 vue-mint-ui简单使用

首先项目用到了mint-ui 安装 cnpm i mint-ui -S 然后按照官网的操作，将mint-ui导入main.js ![watermark_type_Zm

你的名字/ 2021年09月19日 11:02/ 0 赞/ 296 阅读