使用Mint-UI

官网：https://mint-ui.github.io/#!/zh-cn

一、安装

// 安装
# Vue 1.x
cnpm install mint-ui@1 --save
# Vue 2.0
cnpm install mint-ui --save

二、引入组件

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

三、引入样式
在main.js中引入style.css：

import 'mint-ui/lib/style.css';

四、举例
1.Index List
索引列表，可由右侧索引导航快速定位到相应的内容。

• 新建一个名为Module的文件夹，在该文件夹中新建一个名为indexList.vue的文件；
• 在App.vue中进行挂载

APP.vue：

<template>
  <div id="app">
    <v-indexList></v-indexList>
  </div>
</template>

<script>
import IndexList from './Module/indexList';
export default {
  name: 'app',
  components:{
    'v-indexList':IndexList
  }
}
</script>

<style lang="scss">
</style>

indexList.vue：

<template>
 <div>
    <mt-index-list>
        <mt-index-section v-for="(item,index) in user" :index="item.type" :key="index">
            <mt-cell v-for="(t,i) in item.child" :key="i" :title="t.name"></mt-cell>
        </mt-index-section>
    </mt-index-list>
 </div>
</template>

<script>
export default {
    data(){
        return {
            user:[
                {
                    type:"A",
                    child:[
                        {name:"Aaron"},
                        {name:"Alden"},
                        {name:"Austin"},
                        {name:"Allen"},
                        {name:"Ava"},
                        {name:"Andy"},
                        {name:"Adams"}
                    ]
                },
                {
                    index:"B",
                    child:[
                        {name:"Barry"},
                        {name:"Baird"},
                        {name:"Baker"},
                        {name:"Beck"},
                        {name:"Bery"},
                        {name:"Bruce"},
                        {name:"Bryan"}
                    ]
                },
                {
                    index:"C",
                    child:[
                        {name:"Carl"},
                        {name:"Cole"},
                        {name:"Cain"},
                        {name:"Clay"},
                        {name:"Chloe"},
                        {name:"Cecil"}
                    ]
                },
                {
                    index:"D",
                    child:[
                        {name:"Dick"},
                        {name:"Dunn"},
                        {name:"David"},
                        {name:"Dean"},
                        {name:"Duke"},
                        {name:"Dillon"}
                    ]
                }
            ]
        }
    }
}
</script>
<style>
</style>

效果：

2.Message box
弹出式提示框，有多种交互形式。

接上个例子中的App.vue：

<template>
  <div id="app">
    <v-indexList></v-indexList>
    <button @click="btnclick">btn</button>
  </div>
</template>

<script>
import IndexList from './Module/indexList';
import { MessageBox } from 'mint-ui';
export default {
  name: 'app',
  components:{
    'v-indexList':IndexList
  },
  methods:{
    btnclick(){
      MessageBox({
        title:"提示",
        message:"确定执行此操作",
        showCancelButton:true
      }).then((res)=>{
        console.log(res);
      });
    }
  }
}
</script>

<style lang="scss">
</style>

效果：

3.Swipe
轮播图，可自定义轮播时间间隔、动画时长等。

• 新建一个名为Module的文件夹，在该文件夹中新建一个名为Swipe.vue的文件；
• 在App.vue中进行挂载

APP.vue：

<template>
  <div id="app">
    <v-swipe></v-swipe>
  </div>
</template>

<script>
import Swipe from './Module/Swipe';
export default {
  name: 'app',
  components:{
    'v-swipe':Swipe
  }
}
</script>

<style lang="scss">
</style>

Swipe.vue：

<template>
    <div id="swipe">
        <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../image/1.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../image/2.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../image/3.jpg"></mt-swipe-item>
        </mt-swipe>
    </div>
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
}
</script>

<style scoped>
#swipe{
    height: 250px;
    background-color: pink;
}
</style>

效果（轮播）：