VUE CLI创建的项目使用Mint UI的用法

首先安装Mint UI

// 安装
//Vue 1.x
npm install mint-ui@1 -S
//Vue 2.0
npm install mint-ui -S

安装完成后开始在main.js引入Mint UI 

一、按钮使用

在当前文件引入（一定要在这里引入按钮组件---Indicator）

import { Indicator } from 'mint-ui';

 代码---------

<template>
  <div class="hello">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
  </div>
</template>

查看效果

二、提示框的使用 

在当前文件再引入MessageBox组件

*注意在mintUi组件上面执行事件的写法@click.native

import { Indicator, MessageBox} from 'mint-ui';

<template>
  <div class="hello">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger" @click.native="bb('测试成功',true)">danger</mt-button>
  </div>
</template>

 js

bb(text, bool) {
      // 提示框
      //方法一
      // MessageBox.alert("确定执行此操作?").then(action => {
      //
      // });
      //方法二
      MessageBox({
        title: '提示',
        message: text,
        showCancelButton: bool
      });
      //方法三
      // MessageBox.confirm('确定执行此操作?').then(action => {
      
      // });
    },

 效果

三、加载中

<template>
  <div class="hello">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary" @click.native="loads()">primary</mt-button>
    <mt-button type="danger" @click.native="bb('测试成功',true)">danger</mt-button>
  </div>
</template>

loads () {
      //第一种
      //Indicator.open();
      //第二种
       Indicator.open({
         text: '加载中...',
         spinnerType: 'fading-circle'
       });

      setTimeout(function(){
        Indicator.close() //关闭加载
      },2000)
}

四、图片懒加载 

在当前文件再引入Lazylode 组件

  import { Indicator, MessageBox, Lazylode } from 'mint-ui';

<template>
  <div class="hello">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary" @click.native="loads()">primary</mt-button>
    <mt-button type="danger" @click.native="bb('测试成功',true)">danger</mt-button>
  </div>
  <ul>
      <li v-for="item in list">
        <img v-lazy="item">
      </li>
    </ul>
</template>

list:[
         'http://img95.699pic.com/photo/50062/8783.jpg_wh860.jpg',
        'http://img95.699pic.com/photo/40006/2210.jpg_wh300.jpg',
        'http://img95.699pic.com/photo/50050/2419.jpg_wh300.jpg',
        'http://img95.699pic.com/photo/50043/9886.jpg_wh300.jpg',
        'http://img95.699pic.com/photo/50049/5792.jpg_wh300.jpg',
        'http://img95.699pic.com/photo/40005/7613.jpg_wh300.jpg',
        'http://img95.699pic.com/photo/50017/4600.jpg_wh300.jpg',
        'http://img95.699pic.com/photo/50036/2893.jpg_wh300.jpg'
      ]

 

css 

ul{
    list-style: none;
    margin: 0 ;
    padding: 0;
    li{
      img{
        display: inline-block;
        width: 100%;
        height: auto;
      }
    }
  }
//设置正在加载的图片大小
img[lazy=loading] {
  width: 40px!important;
  height: 150px!important;
  margin: auto;
}