1. mint-ui 基于vue.js的移动端组件库
2. 安装mint-ui

 npm I mint-ui -S

3. 导入mint-ui包

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint);

4. mint-ui中使用button，type指定颜色，size指定大小，icon带图标，disable禁用按钮，plain幽灵按钮

<mt-button type="default" icon="more" @click="show()">default</mt-button>
<br/>
<mt-button type="primary" size="large" disable>primary</mt-button>
<br/>
<mt-button type="danger" size="small" plain>danger</mt-button>

---

mint-ui中toast的使用

1. 导入toast,使用时需要再次导入，并不是导入了mint-ui就能直接使用

import { Toast } from 'mint-ui';

2. 基本用法，toast弹出消息窗口

<script>
    import { Toast } from 'mint-ui';//导入toast组件
    export default {
        name: "",
        data(){
            return{
            }
        },
        methods:{
            show(){
                Toast('提示消息');
            }
        }
    }
</script>

3. 在调用Toast时传入对象配置更多选项，message定义弹出的内容，，position弹窗的位置，，duration持续的时间（ms）若为-1 不会自动关闭

show(){
    Toast({
        message:'消息',
        position:'top',
        duration:5000,
    });

4. iconClass若需要显示一个图标，可以将类名作为iconClass的值传给Toast（图标需自行准备）,安装bootstrap并导入

npm i bootstrap@3 

import 'bootstrap/dist/css/bootstrap.css'

5. 向Toast中引入bootstrap的样式的图标

Toast({
    message:'消息',
    position:'top',
    duration:5000,
    iconClass:'glyphicon glyphicon-envelope'

});

6. className自定义Toast的样式，需要自己提供一个类名，新建一个index.css，可以在源码中看到一个i标签控制图标，使用子类选择器改变样式，而字体样式不变

Toast({
    message:'消息',
    position:'top',
    duration:-1,
    iconClass:'glyphicon glyphicon-envelope',
    className:'mytoast'

});

.mytoast i{
    color: aqua !important;
}

7. 模拟获取列表的ajax方法,在获取数据之前，立即弹出Toast提示用户正在加载数据,当3秒过后数据获取回来，移除Toast
8. 执行Toast方法会返回一个Toast实例，每个实例中会有一个close方法，用于手动关闭Toast

show(){
    var toastInstanse=Toast({
        message:'加载数据',
        position:'top',
        duration:-1,
        iconClass:'glyphicon glyphicon-repeat',
        className:'mytoast'

    });

9. 要让getList能够调用toastInstanse就要首先在data中定义

data(){
    return{
        toastInstanse:null
    }
},

10. 然后在getList使用close方法实现关闭Toast

created(){
    this.getList()
},
getList(){
    this.show()
    setTimeout(()=> {
        this.toastInstanse.close()

    },3000)
},

---

按需导入

1. 目的是为了减小文件的体积，所以只需要排除不需要的组件，使用按需导入减小体积
2. 首先安装babel-plugin-component插件

npm i babel-plugin-component -D

3. 修改.babelrc中的配置，将.babelrc文件中的代码改为

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime",["component", [
  {
    "libraryName": "mint-ui",
    "style": true
  }
]]]
}

3. 按需导入，由于之前的代码中只使用到了button，所以只导入这一个，Button.name可以写为自定义名称例如’mybtn’，在调用时使用标签<mybtn></mybtn>

import {Button} from 'mint-ui'
Vue.component(Button.name,Button)

---