013 mint-ui

一：概述

1.中文文档

　　https://mint-ui.github.io/#!/en

2.安装包

　　

二：mt-button的使用

　　主要是介绍css-component

1.程序

　　在App.vue下面写

<template>
  <div>
    <h1>这是 App 组件</h1>
 
    <router-link to="/account">Account list</router-link>
    <router-link to="/goodlist">Goodslist list</router-link>
    <router-view></router-view>
 
    <br>
 
    <mt-button type="primary">primary</mt-button>
    <mt-button type="default">default</mt-button>
    <mt-button type="danger">danger</mt-button> 
 
    <br>
 
    <mt-button size="small" type="primary">small</mt-button>
    <mt-button size="large" type="danger">large</mt-button>
    <mt-button size="normal" type="primary">normal</mt-button>
 
    <br>
 
    <mt-button disabled>disabled</mt-button>
 
    <br>
 
    <mt-button plain>plain</mt-button>
 
    <br>
 
    <mt-button icon="back">back</mt-button>
    <mt-button icon="more">更多</mt-button>
 
  </div>
</template>
 
<script>
</script>
 
<style>
 
</style>

　　

2.效果

　　

三：toast的使用

　　主要是介绍js component

1.需求说明一下

　　刷新进页面弹出提示框，然后等页面数据刷新结束之后，就自动关闭弹框

　　包括弹框图标，以及变色

2.新建一个app.css

　　用于图标变色

.mytoast i{
    color: aqua !important;
}

　　

3.使用bootstrap的图标

　　所以，需要引用包。同时，将新建的css引入

　　修改main.js如下：

// js的主要入口
console.log("ok")
 
import Vue from 'vue'
 
//引用vue-router，然后和vue产生关系
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//MintUI
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
 
//bootstrap的样式
import 'bootstrap/dist/css/bootstrap.css'
 
import './css/app.css'
 
import app from './App.vue'
import router from './router.js'
var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    router
})

　　

4.App.vue代码如下

<template>
  <div>
    <h1>这是 App 组件</h1>
 
    <router-link to="/account">Account list</router-link>
    <router-link to="/goodlist">Goodslist list</router-link>
    <router-view></router-view>
 
    <br>
 
    <mt-button type="primary" @click="show">primary</mt-button>
    <mt-button type="default">default</mt-button>
    <mt-button type="danger">danger</mt-button> 
 
    <br>
 
    <mt-button size="small" type="primary">small</mt-button>
    <mt-button size="large" type="danger">large</mt-button>
    <mt-button size="normal" type="primary">normal</mt-button>
 
    <br>
 
    <mt-button disabled>disabled</mt-button>
 
    <br>
 
    <mt-button plain>plain</mt-button>
 
    <br>
 
    <mt-button icon="back">back</mt-button>
    <mt-button icon="more">更多</mt-button>
 
  </div>
</template>
 
<script>
  import {Toast} from 'mint-ui';
  export default {
    data(){
      return {
        toastTnstance:null
      };
    },
    created(){
        this.getList();
      },
    methods:{
      //模拟获取样表的方法
      getList(){
        this.show();
        setTimeout(() => {
          this.toastTnstance.close();
        }, 2000);
      },
      show(){
        this.toastTnstance=Toast({
          message: 'Upload Complete',
          position: 'bottom',
          duration: -1,
          iconClass: 'glyphicon glyphicon-king',    //图标
          className:'mytoast'   //自定义toast样式
        });
      }
 
    }
  }
</script>
 
<style>
 
</style>

　　

5.效果

　　

四：按需导入

1.导包

　　

2.在.babelrc中修改

　　

3.引入需要的组件

　　main.js

// js的主要入口
console.log("ok")
 
import Vue from 'vue'
 
//引用vue-router，然后和vue产生关系
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//MintUI,这种是全部导入
// import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'
// Vue.use(MintUI)
 
//按需导入
import {Button} from 'mint-ui'
Vue.component(Button.name,Button)
 
//bootstrap的样式
import 'bootstrap/dist/css/bootstrap.css'
 
import './css/app.css'
 
import app from './App.vue'
import router from './router.js'
var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    router
})