mint-ui的学习入门实例

今早上看了一下mint-ui，官网看的虽然不是完全学会使用，但是通过自己百度了解，现在已经可以掌握对mint-ui的基本使用，下面是我自己练习的一些小案例集合，仅供参考，代码如下：

<template>
  <div id="a4">
      <p>mint-ui案例</p>
      <div @click='_Toast()'>Toast实例</div>
      <div @click='_Indicator()'>Indicator实例</div>
      <div @click='_MessageBox()'>MessageBox实例</div>
      <div @click='_Actionsheet()'>Actionsheet实例</div>
      <!-- Actionsheet实例star -->
      <mt-actionsheet  
        :actions= "thisdata"  
        v-model="sheetVisible">  
    </mt-actionsheet>  
    <!-- Actionsheet实例end -->

    <!-- 轮播图star -->
    <div id="lunbo">
        <mt-swipe :auto="3000" :show-indicators="true" @change="handleChange">
            <mt-swipe-item id="lb1">1</mt-swipe-item>
            <mt-swipe-item id="lb2">2</mt-swipe-item>
            <mt-swipe-item id="lb3">3</mt-swipe-item>
        </mt-swipe>
    </div>
    
    <!-- 轮播图end -->
  </div>
</template>
<script>
import { Toast,Indicator,MessageBox,Actionsheet,Swipe,SwipeItem  } from 'mint-ui';
// Vue.component(Actionsheet.name, Actionsheet);
export default {

  data(){
    return{
      // 上拉Actionsheet实例star
      thisdata:[{
        name: '拍照',  
        method : this.getCamera// 调用methods中的函数
      },
      {
        name: '手机相册',  
        method : this.getLibrary// 调用methods中的函数
      }],
      sheetVisible: false,
      // 上拉Actionsheet实例end
    }
  },
  methods:{
    _Toast:function(){
      Toast({
        message: '提示',
        position: 'middle',
        duration: 2000
      });
    },

    _Indicator:function(){
      Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
    });
    setTimeout(function(){
      Indicator.close();
    },1500)
    },

    _MessageBox:function(){
      MessageBox.confirm('确定执行此操作?',{
        message: 'xxx,你确定？',
        title: '提示',
        confirmButtonText: '确定(可改)',
        cancelButtonText: '取消(可改)'
      }).then(action => {
            console.log('点击了确定');
      }).catch(err =>{
            console.log('点击了取消');
      });
    },
    _Actionsheet:function(){
      // <span style="white-space:pre;">   </span>// 打开action sheet  
      this.sheetVisible = true;  
    },
    getCamera:function(){
      console.log("点击的相机")
    },
    getLibrary:function(){
      console.log("点击的相机")
    },
    getout:function(){
      console.log("点击的取消")
    },
    handleChange:function(index){
      console.log(index);
    },

  }
}
</script>

<style scoped>
#a4{
  background: rgb(73, 125, 236);
  width: 100%;
  height: 100%;
}
#a4 p{
    font-size: 20px;
    text-align: center;
}
#lunbo{
  width: 200px;
  height: 100px;
  border: solid 1px ;
}
#lb1{
  background: rgb(230, 48, 160);
}
#lb2{
  background: rgb(51, 153, 97);
}
#lb3{
  background: rgb(190, 169, 46);
}
</style>

通过小案例，对于大部分组件即可大概了解如何使用