MintUI使用方式

mintUI APi网址

使用node环境进行安装使用

安装指令

npm i mint-ui -S

使用脚手架vue-cli创建项目

npm install -g vue-cli
vue init webpack projectname
           

或者

：

使用指令

npm install -g @vue/cli

下载安装最新的脚手架方式

然后使用指令

vue create projectname

方式创建新的脚手架项目

使用指令

npm install -g -S mint-ui

方式安装mintUI框架

切换到项目根目录下打开命令行窗口使用指令

npm run serve

即可运行刚刚创建的vue脚手架项目

配置使用MintUI

在脚手架项目的main.js文件中使用如下代码

import Vue from 'vue'
// 重点引入框架
import MintUI from 'mint-ui'
// 引入框架的css样式
import 'mint-ui/lib/style.css'
import App from './App.vue'
// 挂载到vue的跟组件下
Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})
           

简单介绍

mintUI是饿了么团队开发开封的框架，适合移动端的ui设计

组件

顶部导航栏

<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
           

参数	说明	类型	可选值	默认值
fixed	固定在页面顶部	Boolean	false
title	标题	String

底部选项卡

顶部选项卡

按钮组件

单元格组件

可以滑动的单元格

加载时的加载动画

面板

搜索框

开关组件

复选框列表

单选框

表单编辑器

<mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
<mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field>
<mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
<mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
<mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field>
<mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field>
<mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field>
<mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-modal="introduction"></mt-field>
           

参数	说明	类型	可选值	默认值
type	输入框类型	String	text, number, email, url, tel, date, datetime, password, textarea	text
label	标签	String
value	绑定表单输入值	String
rows	类型为 textarea 时可指定高度（显示行数）	Number
placeholder	占位内容	String
disableClear	禁用 clear 按钮	Booean	false
readonly	readonly	Boolean	false
disabled	disabled	Boolean	false
state	校验状态	String	error, success, warning
attr	设置原生属性，例如 :attr="{ maxlength: 10 }"	Object

徽章