• 官網(wǎng)：https://mint-ui.github.io/#!/zh-cn
• Github: https://github.com/ElemeFE/mint-ui/

前面兩節(jié)說(shuō)到，從搭建環(huán)境，引入Mint框架，到實(shí)現(xiàn)一個(gè)頁(yè)面導(dǎo)航跳轉(zhuǎn)；
Vue移動(dòng)端框架Mint UI教程-搭建環(huán)境引入框架（一）：http://www.itdecent.cn/p/874e5152b3c5
Vue移動(dòng)端框架Mint UI教程-底部導(dǎo)航欄（二）：http://www.itdecent.cn/p/56e887cbb660

然后就是開(kāi)始寫(xiě)每個(gè)頁(yè)面的代碼，Mint UI存在必有道理
基于vue2.0mint-ui組件的使用

<template>
  <div>
    <gheader :examplename="examplename"></gheader>
    <ul>
      <li><mt-button size="large" @click="ToastA">默認(rèn)Toast</mt-button></li>
      <li><mt-button size="large" @click="ToastB">帶Icon標(biāo)志的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('默認(rèn)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>

效果如下：

Mint UI教程匯總：

Vue移動(dòng)端框架Mint UI教程-搭建環(huán)境引入框架（一）
http://www.itdecent.cn/p/874e5152b3c5
Vue移動(dòng)端框架Mint UI教程-底部導(dǎo)航欄（二）
http://www.itdecent.cn/p/56e887cbb660
Vue移動(dòng)端框架Mint UI教程-組件的使用（三）
http://www.itdecent.cn/p/5ec1e2d2f652
Vue移動(dòng)端框架Mint UI教程-跳轉(zhuǎn)新頁(yè)面(四)
http://www.itdecent.cn/p/364d0462ddb6
Vue移動(dòng)端框架Mint UI教程-調(diào)用模擬json數(shù)據(jù)(五)
http://www.itdecent.cn/p/6d3f1436b327
Vue移動(dòng)端框架Mint UI教程-數(shù)據(jù)渲染到頁(yè)面（六）
http://www.itdecent.cn/p/dc532ab82d2a
Vue移動(dòng)端框架Mint UI教程-接口跨域問(wèn)題（七）
http://www.itdecent.cn/p/b28cd8290b2a

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛(ài)編程，愛(ài)運(yùn)營(yíng)，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題，堅(jiān)持記錄工作中所所思所見(jiàn)，對(duì)于博客上面有不會(huì)的問(wèn)題，歡迎加入編程微刊qq群：260352626