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
})