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实例starthisdata:[{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>

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

mint-ui的学习入门实例相关推荐

React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心需要引入三个库什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
Drools学习入门实例
http://blog.sina.com.cn/s/blog_67d6d5df0100jyqk.html 在Eclipse新建Drools工程就可以导入自带的例子进行学习. 接下来: 如此,就 ...
李宏毅《深度学习》：深度学习入门实例
1.Keras 在这里我们推荐使用keras进行深度学习编程,比起tensorflow来说更容易学习,操作简单, 2.手写识别实例这里手写识别的数据集来自于minst,一个非常常用的数据集,从ker ...
深度学习入门实例——基于keras的mnist手写数字识别
本文介绍了利用keras做mnist数据集的手写数字识别. 参考网址 http://www.cnblogs.com/lc1217/p/7132364.html mnist数据集中的图片为28*28的单 ...
Matlab深度学习入门实例:基于AlexNet的红绿灯识别（附完整代码）
AlexNet于2012年出现在ImageNet的图像分类比赛中,并取得了当年冠军,从此卷积神经网络开始受到人们的强烈关注.AlexNet是深度卷积神经网络研究热潮的开端,也是研究热点从传统视觉方法过 ...
【Vue学习总结】21.Vue-UI框架之Mint UI的使用
接上篇<20.Vue路由中的嵌套> 上一篇我们讲解了Vue路由中的嵌套,本篇我们来介绍Vue的UI框架----Mint UI的使用. 本系列博文使用的Vue版本:2.6.11 一.基于Vu ...
UI设计师培训入门都需要学习什么技术?
UI设计在如今的IT行业是非常火热的,它的发展前景是非常可观的,想要进入到这个行业的小伙伴越来越多,那么UI设计师培训入门都需要学习什么技术呢?小编下面为大家做下详细的介绍. UI设计师培训入门都需要 ...
JUnit学习摘要+入门实例 (junit4)
http://www.cnblogs.com/xwdreamer/archive/2012/03/29/2423136.html 1.学习摘要看<重构-改善既有代码的设计>这本书的时候, ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...

mint-ui的学习入门实例

mint-ui的学习入门实例相关推荐

最新文章

热门文章