在vue项目中安装使用Mint-UI的方法(2)

　　　　前面安装的插件会自动引入相应的 CSS 文件！

六、具体使用UI组件 -- 可以直接参考官方文档http://mint-ui.github.io/docs/

　　使用的过程中发现Mint UI文档不是很详细,很多具体的用法都需要另外百度...

　　1.首先看下官方文档的第一种引入和用法:

　　这种组件引入的时候,有一行Vue.component("对应的组件名"),使用的时候是再vue文档的template部分,使用对应的标签名加属性,其实就是直接复制官方文档的代码即可,不过相对复杂多属性的组件就要另外百度了.

　　那么接下来看一下在项目中的使用代码:

//在main.js里面添加--复制官方文档该组件对应的引入即可
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
<template>
 <mt-header title="修改客户资料">
   <a @click="toBack" replace slot="left">
    <a class="back-icon"></a>
   </a>
   <!--这个头部导航栏关键的是mt-header父标签,而该标签内的内容是根据需求写的哦-->
 </mt-header>
</template>

组件效果图

　　2. 然后看官网文档的第二种引入和用法:

　　我们可以看到这种组件引入的时候,居然没有Vue.component("对应的组件名"),然后看基本用法,就这么简单一句......

　　我参照第一种方法直接引入文档的Toast组件,然后在script里面使用,这个时候会报错:

//提示框
import { Toast } from 'mint-ui';
created:function(){
 Toast("使用Toast"); //这里是为了测试才写在created里面,在平时用的时候,是根据自己需要放在对应的位置使用的
}

　　百度了一下,好像挺多人跟我一样遇到这个问题的......

　　其实我们看下Toast的使用语句,就可以知道Toast是一个方法,既然是方法,直接在js里面未定义使用就会报错,所以我们在引入该组件的时候,将该方法设置为全局变量:

//在main.js里面添加,这里需要将Toast方法设置为全局变量,否则就要在每个用到该方法的vue页面重新引入该组件....
import { Toast } from 'mint-ui';
window.Toast= Toast;