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

徽章