mint ui 学习笔记（1）

墨蓝 2022-12-29 00:30 102阅读 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 条评论，102人围观）

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

相关阅读

相关 mint-ui使用

mint-ui 的使用 [mint-ui官网][mint-ui] 1. 安装 npm install mint-ui -S 1. 引入项目全局

爱被打了一巴掌/ 2023年07月18日 09:09/ 0 赞/ 30 阅读

相关 Mint-ui(移动组件库) Element-ui

Mint-ui 简介 > 1. 基于 `Vue.js` 的移动端组件库 > 2. Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需

秒速五厘米/ 2023年06月19日 06:49/ 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 赞/ 103 阅读

相关 vue中mint-ui使用

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

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

相关 Mint-ui MessageBox.confirm

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

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

相关 vue引入Mint-UI

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

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

相关 vue mint-ui 使用手册

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

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

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

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

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

相关 Mint UI搭建环境

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

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

相关 vue-mint-ui简单使用

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

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