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

  

 

posted @ 2019-09-01 00:35 曹军 阅读(...) 评论(...) 编辑 收藏