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