前言
前面的篇章基本已经说明在webpack中如何构建vue框架的时候。除了这些基础框架的要素,为了快速开发app应用。还要借助于更多的开源组件。
本篇章就来介绍一下如何基本使用饿了么的Mint UI组件。
使用 饿了么的 MintUI 组件
Github 仓储地址
Mint-UI官方文档
![e5e580ee8732567e88e42d22622bec13.png](https://i-blog.csdnimg.cn/blog_migrate/6a0ad74c453f4a03ce9e362a385d873b.png)
腾讯说明文档
![f3ca589b538d73dfbd18336b3ef0f394.png](https://i-blog.csdnimg.cn/blog_migrate/76be8db9da37c797024e4c4f526b7964.png)
安装基本说明
首先我们来看看官网的首页介绍,如下:
![5364aea1ed443a0bb05d04f4937350c9.png](https://i-blog.csdnimg.cn/blog_migrate/e928024eacd983f66a03402c9d9e9872.png)
对于mint-ui
的导入更加推荐使用「按需导入」的方式,因为这样可以节省压缩编译后的bundle.js
的空间大小。
1.使用npm安装mint-ui
# Vue 2.0
npm install mint-ui -S
在项目中执行安装如下:
![d513f4530b1365540fd7914247ff82ae.png](https://i-blog.csdnimg.cn/blog_migrate/7e1d7a8b48ace4c56265456df593963d.png)
好了,安装完毕之后,下面来「导入组件」。
2.完整导入mint-ui的说明
访问 http://mint-ui.github.io/docs/#/zh-cn2/quickstart
下面先来完整导入看看,如下:
![96fc7893f27918b0830f7db3f51df352.png](https://i-blog.csdnimg.cn/blog_migrate/32e9d75cc36e6cb51d2df01dfa00ec27.png)
在 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
![a14433354b598052062ab3825653b12e.png](https://i-blog.csdnimg.cn/blog_migrate/c412291bad79e2eb2d2b9d70e538e083.png)
当完整导入mint-ui
之后,就可以使用使用相关的组件了,下面来看看一个button按钮组件。
4.使用button组件
访问 https://cloud.tencent.com/developer/section/1489979
![5ac51fa6f362cefbd6f346cff0ddddaa.png](https://i-blog.csdnimg.cn/blog_migrate/8f518eb5ecc31b72685e8d0843eaff80.png)
<mt-button type="default">defaultmt-button>
<mt-button type="primary">primarymt-button>
<mt-button type="danger">dangermt-button>
下面在app组件中使用看看,如下:
![c29cfcf85736003f03a06bc33e4447bd.png](https://i-blog.csdnimg.cn/blog_migrate/78a49a004128d558c59ade7653203de4.png)
在浏览器看看效果:
![a4c37f60015874b8cc1d6ef975305801.png](https://i-blog.csdnimg.cn/blog_migrate/2259399af0454db3e37a57939197f4a7.png)
5.设置button按钮的大小
<mt-button size="small">smallmt-button>
<mt-button size="large">largemt-button>
<mt-button size="normal">normalmt-button>
下面配置一下,如下:
![ef23342be4114331259099e39fa34bd3.png](https://i-blog.csdnimg.cn/blog_migrate/607720087b0bc937013a1f69504f3973.png)
浏览器显示如下:
![24f46dd274cbab242d383c0619c049cd.png](https://i-blog.csdnimg.cn/blog_migrate/741259f27a111c8fd8f3e7922b2dc385.png)
6.设置button按钮的禁用disabled
<mt-button disabled>disabledmt-button>
设置如下:
![3d2f179ddbe75bfeaeef7c647fa87dbd.png](https://i-blog.csdnimg.cn/blog_migrate/b71a0456e3c2c350a8b5d0a979f97084.png)
浏览器显示如下:
![d73f35f91bde1adf6d79e7964b49961e.png](https://i-blog.csdnimg.cn/blog_migrate/6ff5c3d96f5504bff3a7dd232a3826b8.png)
7.设置button幽灵按钮 plain
<mt-button plain>plainmt-button>
编写如下:
![249a99f196a1bfa11c7b77fdb63bf177.png](https://i-blog.csdnimg.cn/blog_migrate/144026730f44701c94c83f29ee9bd0b0.png)
浏览器显示如下:
![644b1b586af3acaf4e946e0f7143a803.png](https://i-blog.csdnimg.cn/blog_migrate/cd948bd5563a2b98cb4203122b1f9b05.png)
8.设置button图表 icon
<mt-button icon="back">backmt-button>
<mt-button icon="more">更多mt-button>
设置如下:
![d8288ab22554feaae616fb045def67da.png](https://i-blog.csdnimg.cn/blog_migrate/4ea7ce5633cc90dea113c3cc6fcd2bac.png)
浏览器显示如下:
![f6567fed3141f3af3a9e88e86da8302c.png](https://i-blog.csdnimg.cn/blog_migrate/cda91d1c42bf6e8e2bcd725228aa84af.png)
可以看到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组件中设置如下:
![69ecd79175831f2d9d22d53f961b1e8f.png](https://i-blog.csdnimg.cn/blog_migrate/9e04ca102778e75c6185ed94edbfae0d.png)
在浏览器测试如下:
![cab2a3288bdd3db47b703903477e465b.png](https://i-blog.csdnimg.cn/blog_migrate/d471c8f9523c5cc934d2b5547b686efa.png)
3.设置更多消息提示的API配置
https://cloud.tencent.com/developer/section/1489961
![ca00f5013dcea0508f06add74dd1eb57.png](https://i-blog.csdnimg.cn/blog_migrate/90d890bf996d71cd0111c7ef5415c755.png)
在调用 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.设置提示消息的位置以及持续时长
![6439621f2a74ccd5f9f2b5f96e30c193.png](https://i-blog.csdnimg.cn/blog_migrate/3d4704b1c48104ff92b6612a44e0bc34.png)
测试效果如下:
![ed7814ce158f1ac89248243e05d53bd5.png](https://i-blog.csdnimg.cn/blog_migrate/bf840923fd739591709b2b08ea0f283c.png)
5.给提示消息设置icon图标
虽然提示消息可以配置icon图标,但是图标库却是要自己准备的。
「说明:若需在文字上方显示一个 icon 图标,可以将图标的类名作为 iconClass
的值传给 Toast
(图标需自行准备)」
Toast({
message: '操作成功',
iconClass: 'icon icon-success'
});
在这里我使用阿里巴巴的图标矢量库作为演示,首先访问:https://www.iconfont.cn/
搜索一个打勾的图标作为演示,如下:
![83715fab6c6c249b16236b5e147a4eb7.png](https://i-blog.csdnimg.cn/blog_migrate/eb7198524d3251250c78f2ec89a6add4.png)
![7529e62dd9c8e60438056035ae297ae9.png](https://i-blog.csdnimg.cn/blog_migrate/e387602a1e78f87840f84e2bdc3596fb.png)
![819fc67fcaa86a0014bae55bec16e701.png](https://i-blog.csdnimg.cn/blog_migrate/23729ae01b40d09f900a93cdd098e508.png)
将选择好的图标下载至本地中。
创建一个static/iconfont
文件夹,用于存放字体文件
![adbbb61718d456f57c3b78c3a1deaac3.png](https://i-blog.csdnimg.cn/blog_migrate/3cf997340c498a0472bc80137fee280a.png)
在main.js
导入iconfont库
![6bdd2a83722764f2d90ad87064caeafa.png](https://i-blog.csdnimg.cn/blog_migrate/5df4ecbf790479ac65e2ba285055cecb.png)
// 引入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中设置图标样式
![b8758844c6025c3edc0defaf4cc49eaf.png](https://i-blog.csdnimg.cn/blog_migrate/5336371fe1b4f96f6a8eb2342eab6714.png)
在浏览器看看提示消息
![f27b0e1d039c40a1eb763130b1509274.png](https://i-blog.csdnimg.cn/blog_migrate/afeb934d494b860c5617b716722df2c7.png)
6.自定义Toast的样式类
![5d0d4a0a795d41aa393f0687abc89a23.png](https://i-blog.csdnimg.cn/blog_migrate/8b8758c1f7f4b3587a503c96a2560751.png)
![3f363b285cf10908609cb1a14dfd45a9.png](https://i-blog.csdnimg.cn/blog_migrate/cc48c7b90411168f679e5c3354dd0ab8.png)
在浏览器显示如下:
![20999f7a77cd72eabffdab409ee9ed28.png](https://i-blog.csdnimg.cn/blog_migrate/91a9d0471ad3a375f451ddb88668613e.png)
7.自定义关闭Toast提示消息
在网页请求的时候,经常会使用一些loding加载图标。当请求回来之后,则关闭图标。
那么这种情况就需要我们自己来定义图标的关闭时刻。
下面可以设置图标不关闭,然后使用延时setTimeout
来模拟网络延时请求,如下:
![e094d153b8347a5f7980936ad06ca68e.png](https://i-blog.csdnimg.cn/blog_migrate/80311406aa068a20d7a0c5471d237ca7.png)
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)
},
测试效果如下:
![c3ef4ae965dae420bd98178734511c7b.png](https://i-blog.csdnimg.cn/blog_migrate/df13368bcd3e3b671b318b7bf0cf8127.png)
![ac3ad51144103f0e766fe0f1404130e3.png](https://i-blog.csdnimg.cn/blog_migrate/94e96e5c58244257ae88d553512e8457.png)
Mint-UI 按需导入组件说明
在上面都是使用Mint-UI的完整导入,我们来看看生成的bundle.js文件有多大,如下:
![c6c08b4cb5115e5c77b4484d49249e4f.png](https://i-blog.csdnimg.cn/blog_migrate/4ab36d2987439f3d94f381c4b963d3f1.png)
生成的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
![847dfbfaaca6b5d8e8849f4bd3c3f91c.png](https://i-blog.csdnimg.cn/blog_migrate/e93b3988d4c49baba99df31506f455b7.png)
3.将 .babelrc 配置插件
![62d8d5e8095a03a087c17b36b89efb83.png](https://i-blog.csdnimg.cn/blog_migrate/95210505eff3925990d65bad1a41f1d4.png)
{
"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按钮
![929dd173f6d7ad2b32d25ecc5454b540.png](https://i-blog.csdnimg.cn/blog_migrate/ec340d57c7b04487138a9c7cb844ba91.png)
// 按需导入 Mint-UI
// 导入Button按钮
import { Button } from 'mint-ui'
Vue.component(Button.name, Button); // 设置Button按钮组件,可以自定义修改 Button 组件的名称 Button.name
5.测试是否正常使用Button组件
![b08e4b5ad36b8623ce1ba25606eec2b7.png](https://i-blog.csdnimg.cn/blog_migrate/5994b0bd82c0dd9f223cb814e7a49ea1.png)
更多精彩原创Devops文章,快来关注我的公众号:【Devops社群】 吧:」
![422172e70c2bb8ef6335399529ccbfb2.gif](https://i-blog.csdnimg.cn/blog_migrate/9f3551a4193a2c576694924fa335771b.gif)
点击下面,查看更多Vue系列文章