目录
Mint-ui移动端组件库
mint-ui参考文档：mint-ui.github.io/docs/#/
// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
Mint-ui将组件分为了三类，Js控制组件，Css控制组件，表单控制组件
可以不使用nmp去下载Mint-ui，使用cdn去导入Mint-ui组件
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- 导入vue包,在浏览器内存中，就多了一个vue构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/mint.css"/>
<title></title>
</head>
<body>
<div id="app">
<mt-button type="default" size="large">default</mt-button>
<mt-button type="primary" size="normal" disabled>primary</mt-button>
<mt-button type="danger" size="small" @click="show">danger</mt-button>
<mt-search
v-model="value"
cancel-text="取消"
placeholder="搜索">
</mt-search>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
//定义toast
instance:null
},
created() {
this.getList()
},
methods:{
getList(){
this.show();
//模拟2秒延迟，让提示自动消失
setTimeout(() => {
this.instance.close();
}, 2000);
},
//展示提示
show(){
console.log("aaaaa")
this.instance = this.$toast({
message: '提示',
position: 'middle',
//如果duration持续时间是-1，则不会消失
duration: 1000,
//设置图标类
iconClass: 'glyphicon glyphicon-eye-open',
//自定义Toast样式，需要自己提供一个类名
className:'mytoast'
});
}
}
})
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
mint.css
.mytoast i{
color:red;
}
运行效果：
MUI
MUI参考文档：dev.dcloud.net.cn/mui/ui/
MUI类似于bootstrap，是可以让任何项目使用的，但是Mint-ui只能在Vue项目中使用
MUI不能使用npm去下载MUI，需要自己手动从GitHub上下载现有的包，自己解压出来，然后再手动拷贝到项目中使用。
在hubuilder上可以选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
使用MUI的话需要从examples中寻找合适的样例，或者从官方文档中寻找样式，和bootstrap类似
例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div>
<button type="button" class="mui-btn mui-btn-royal">
紫色
</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
一起学习，一起进步 -.- ，如有错误，可以发评论
