- 官网：https://mint-ui.github.io/#!/zh-cn
- Github: https://github.com/ElemeFE/mint-ui/
前面两节说到，从搭建环境，引入Mint框架，到实现一个页面导航跳转；
Vue移动端框架Mint UI教程-搭建环境引入框架（一）：https://cloud.tencent.com/developer/article/1406082
Vue移动端框架Mint UI教程-底部导航栏（二）：https://cloud.tencent.com/developer/article/1415738
然后就是开始写每个页面的代码，Mint UI存在必有道理
基于vue2.0mint-ui组件的使用
<template>
<div>
<gheader :examplename="examplename"></gheader>
<ul>
<li><mt-button size="large" @click="ToastA">默认Toast</mt-button></li>
<li><mt-button size="large" @click="ToastB">带Icon标志的Toast</mt-button></li>
<li><mt-button size="large" @click="ToastC">自定义位置Toast</mt-button></li>
</ul>
<gfooter></gfooter>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
name: 'Toast',
data(){
return {
examplename: "Toast"
}
},
mounted(){
},
methods:{
ToastA(){
Toast('默认Toast');
},
ToastB(){
Toast({
message: '操作成功',
iconClass: 'fa fa-check fa-2x'
});
},
ToastC(){
Toast({
message: '自定义位置',
position: 'bottom',
duration: 5000
});
}
}
}
</script>
<style scoped>
ul {
padding-left: 10px;
padding-top: 20px;
padding-right: 10px;
}
li {
margin: 20px 0;
list-style: none;
}
</style>效果如下：
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。
