一、简介
Mint UI是一个基于Vue.js的移动端组件库
若对组件的概念不太了解 请参看本人的另一篇博客:Vue学习之旅Part8:Vue全局组件和私有组件的创建及组件切换动画
Mint UI和Bootstrap不一样 Bootstrap并不是一个真正的组件库 而是类似于代码片段
而Mint-UI是真正的组件库 是使用 Vue 技术封装的成套组件 可无缝和VUE项目进行集成开发 且只适用于Vue项目
二、使用
安装
1.x版本的Vue安装时需指定Mint UI的版本
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
引入
Mint UI的引入方式分为两种:
可引入全部组件 使用会较为方便 但占用内存较大
还可按需引入部分的组件 节省占用的内存
(注:按需导入的使用方式请参看我的另一篇博客:在Vue中使用babel-plugin-component插件以实现按需导入Mint UI的组件)
// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { 组件名 } from 'mint-ui';
Vue.component(组件名);
Vue.component(组件名.name, 组件名);
Mint UI的组件分为两种:CSS组件 和 JS组件
1、CSS组件 - 以Button为例
CSS组件有很多 按钮(button)只是其中之一
CSS组件的特点是只要全局引入了Mint UI的组件 即可在页面中以标签的形式直接使用
main.js:
// 导入Mint UI所有组件
import MintUI from "mint-ui"
// 导入Mint UI的样式(前面可省略node_modules目录)
import "mint-ui/lib/style.css"
// 手动安装Mint UI到Vue中
Vue.use(MintUI)
App.vue:
按钮组件的默认标签名为<mt-button>
<template>
<div>
<mt-button type="danger" size="large">button</mt-button>
<mt-button disabled>disabled</mt-button>
<mt-button plain>plain</mt-button>
<mt-button icon="back">back</mt-button>
<mt-button on icon="more">更多</mt-button>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
用type属性改变按钮的颜色:
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
用size属性改变按钮的大小:
<mt-button size="small">small</mt-button>
<mt-button size="large">large</mt-button>
<mt-button size="normal">normal</mt-button>
用disabled属性禁用按钮:
<mt-button disabled>disabled</mt-button>
用plain属性设为幽灵按钮:
(即颜色和外面的相反 只有边框颜色 里面是空白的)
<mt-button plain>plain</mt-button>
用icon属性设置按钮的图标:
<mt-button icon="back">back</mt-button>
<mt-button icon="more">更多</mt-button>
用src属性设置自定义图标:
<mt-button>
<img src="../assets/100x100.png" height="20" width="20" slot="icon">
自定义图标
</mt-button>
用**.native**绑定点击事件:
<mt-button @click.native="handleClick">点击触发</mt-button>
2、JS组件 - 以Toast为例
JS组件也有很多 弹出框(Toast)只是其中之一
JS组件的特点是需要在<script>标签内导入
导入:
import { 组件名} from 'mint-ui';
App.vue:
<template>
<div>
<mt-button type="danger" size="large" @click="show">button</mt-button>
</div>
</template>
<script>
// 从Mint UI中按需导入Toast组件
import { Toast } from 'mint-ui';
export default {
data(){
return{}
},
methods:{
show()
{
Toast("提示");
}
}
}
</script>
<style>
</style>
在调用Toast时 可传入一个对象 以配置更多选项:
Toast({
message: '提示', // 弹窗内容
position: 'bottom', // 弹窗位置(top middle bottom)
duration: 5000 // 持续时间(毫秒) 若为-1则永久显示
});
可用iconClass属性设置在Toast的文字上方显示一个图标:
将图标的类名作为iconClass的值传给Toast
Toast({
message: '操作成功',
iconClass: 'icon icon-success' // 图标的类名
});
可用className属性设置图标的样式:
传入一个类的类名(class) 即可实现该类的样式
app.css:
.mytoast
{
color:aqua;
}
main.js:
// 导入bootstrap样式
import "bootstrap/dist/css/bootstrap.css"
// 导入自定义的css样式
import "./css/app.css"
App.vue:
<template>
<div>
<mt-button type="danger" @click="show">button</mt-button>
</div>
</template>
<script>
// 从Mint UI中按需导入Toast组件
import { Toast } from 'mint-ui';
export default {
data(){
return{}
},
methods:{
show()
{
Toast({
message: '提示', // 弹窗内容
position: 'middle', // 弹窗位置(top middle bottom)
duration: 5000, // 持续时间(毫秒) 若为-1则永久显示
iconClass: 'glyphicon glyphicon-ok', // 图标的类名
className: "mytoast" // 自定义样式 传入一个类的类名
});
}
}
}
</script>
<style>
</style>
还可用子类选择器设置只修改图标的样式:
在Toast里 有个i
标签用于承载图标 因此修改 i 标签的样式即可
.mytoast i
{
color:aqua;
}