前言
前面的篇章基本已經說明在webpack中如何構建vue框架的時候。除了這些基礎框架的要素,爲了快速開發app應用。還要藉助於更多的開源組件。
本篇章就來介紹一下如何基本使用餓了麼的Mint UI組件。
使用 餓了麼的 MintUI 組件
安裝基本說明
首先我們來看看官網的首頁介紹,如下:
對於mint-ui
的導入更加推薦使用按需導入的方式,因爲這樣可以節省壓縮編譯後的bundle.js
的空間大小。
1.使用npm安裝mint-ui
# Vue 2.0
npm install mint-ui -S
在項目中執行安裝如下:
好了,安裝完畢之後,下面來導入組件。
2.完整導入mint-ui的說明
訪問 http://mint-ui.github.io/docs/#/zh-cn2/quickstart
下面先來完整導入看看,如下:
在 main.js 中寫入以下內容:
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
以上代碼便完成了 Mint UI 的引入。需要注意的是,樣式文件需要單獨引入。
Mint-UI中css組件的使用
3.在 main.js 配置完整導入mint-ui
當完整導入mint-ui
之後,就可以使用使用相關的組件了,下面來看看一個button按鈕組件。
4.使用button組件
訪問 https://cloud.tencent.com/developer/section/1489979
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
下面在app組件中使用看看,如下:
在瀏覽器看看效果:
5.設置button按鈕的大小
<mt-button size="small">small</mt-button>
<mt-button size="large">large</mt-button>
<mt-button size="normal">normal</mt-button>
下面配置一下,如下:
瀏覽器顯示如下:
6.設置button按鈕的禁用disabled
<mt-button disabled>disabled</mt-button>
設置如下:
瀏覽器顯示如下:
7.設置button幽靈按鈕 plain
<mt-button plain>plain</mt-button>
編寫如下:
瀏覽器顯示如下:
8.設置button圖表 icon
<mt-button icon="back">back</mt-button>
<mt-button icon="more">更多</mt-button>
設置如下:
瀏覽器顯示如下:
可以看到mint-ui提供了這兩個的圖標,如果還要更多,就要自己自定義使用其他庫的圖標了。
Mint-UI中 js 組件的使用
上面演示了mint-ui
中css組件的基本使用,那麼下面來看看js組件的基本使用。
與css組件不同,js組件不管Mint-ui是否完整導入,都需要進行特定的組件進行導入。
1.導入簡短的消息提示框 | Toast
import { Toast } from 'mint-ui';
2.下面在app組件中設置一個點擊按鈕事件,並且觸發Toast
消息
基本用法:
Toast('提示信息');
在app組件中設置如下:
在瀏覽器測試如下:
3.設置更多消息提示的API配置
https://cloud.tencent.com/developer/section/1489961
在調用 Toast
時傳入一個對象即可配置更多選項
Toast({
message: '提示',
position: 'bottom',
duration: 5000
});
若需在文字上方顯示一個 icon 圖標,可以將圖標的類名作爲 iconClass
的值傳給 Toast
(圖標需自行準備)
Toast({
message: '操作成功',
iconClass: 'icon icon-success'
});
執行 Toast
方法會返回一個 Toast
實例,每個實例都有 close
方法,用於手動關閉 Toast
let instance = Toast('提示信息');
setTimeout(() => {
instance.close();
}, 2000);
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
message | 文本內容 | String | ||
position | Toast 的位置 | String | 'top''bottom''middle' | 'middle' |
duration | 持續時間(毫秒),若爲 -1 則不會自動關閉 | Number | 3000 | |
className | Toast 的類名。可以爲其添加樣式 | String | ||
iconClass | icon 圖標的類名 | String |
可以看到文檔中提示有很多API參數可以設置,下面來逐個演示一下。
4.設置提示消息的位置以及持續時長
測試效果如下:
5.給提示消息設置icon圖標
雖然提示消息可以配置icon圖標,但是圖標庫卻是要自己準備的。
說明:若需在文字上方顯示一個 icon 圖標,可以將圖標的類名作爲 iconClass
的值傳給 Toast
(圖標需自行準備)
Toast({
message: '操作成功',
iconClass: 'icon icon-success'
});
在這裏我使用阿里巴巴的圖標矢量庫作爲演示,首先訪問:https://www.iconfont.cn/
搜索一個打勾的圖標作爲演示,如下:
將選擇好的圖標下載至本地中。
創建一個static/iconfont
文件夾,用於存放字體文件
在main.js
導入iconfont庫
// 引入iconfont庫
import './static/iconfont/iconfont.css'
配置webpack使用字體庫文件
安裝url-loader
cnpm i url-loader file-loader -D
在webpack.config.js配置規則如下:
module: {
rules: [
....
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader
]
},
在消息提示Toast中設置圖標樣式
在瀏覽器看看提示消息
6.自定義Toast的樣式類
在瀏覽器顯示如下:
7.自定義關閉Toast提示消息
在網頁請求的時候,經常會使用一些loding加載圖標。當請求回來之後,則關閉圖標。
那麼這種情況就需要我們自己來定義圖標的關閉時刻。
下面可以設置圖標不關閉,然後使用延時setTimeout
來模擬網絡延時請求,如下:
created() {
console.log("模擬網頁啓動獲取list數據");
// 模擬網頁啓動獲取list數據
this.getlist()
},
methods: {
getlist() {
let instance = Toast({
message: '提示',
position: 'bottom',
duration: -1, // 設置圖標不關閉
iconClass: 'iconfont icon-xin11', // 設置圖標
className: 'mytoast', // 自定義樣式類
}); // 啓動圖標
// 使用延時來模擬網絡請求
setTimeout(function () {
instance.close();
console.log("獲取到列表數據,關閉圖標")
}, 3000)
},
測試效果如下:
Mint-UI 按需導入組件說明
在上面都是使用Mint-UI的完整導入,我們來看看生成的bundle.js文件有多大,如下:
生成的bundle.js大小達到了1.16 MB,這是非常大的。
爲了更好的減少這個文件大小,下面我們來按需導入mint-ui。
1.官網按需導入的說明
按需引入
藉助 babel-plugin-component,我們可以只引入需要的組件,以達到減小項目體積的目的。
首先,安裝 babel-plugin-component:
npm install babel-plugin-component -D
然後,將 .babelrc 修改爲:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
如果你只希望引入部分組件,比如 Button 和 Cell,那麼需要在 main.js 中寫入以下內容:
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫爲
* Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
components: { App }
})
下面來執行一下看看。
2.安裝插件 babel-plugin-component
npm install babel-plugin-component -D
3.將 .babelrc 配置插件
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-transform-runtime", {"corejs": 2, "helpers": true, "regenerator": true, "useESModules": false}],
["component", {"libraryName": "mint-ui","style": true}]
]
}
4.在main.js配置導入Button按鈕
// 按需導入 Mint-UI
// 導入Button按鈕
import { Button } from 'mint-ui'
Vue.component(Button.name, Button); // 設置Button按鈕組件,可以自定義修改 Button 組件的名稱 Button.name
5.測試是否正常使用Button組件
更多精彩原創Devops文章,快來關注我的公衆號:【Devops社羣】 吧: