使用mintUI的总结

一、前言

项目接近尾声，就想着做一个总结，期间遇到了很多问题，网上的帖子也是五花八门，有些东西根本没有说到点上，导致走了很多弯路，介于本人也只是一个萌新，总结仅供参考。

二、mintUI组件的使用

1、Tabbar

用到mintUI，肯定是移动端的项目了，不论是app还是h5都少不了这个底部导航，关于底部导航的，我在前面已经有所总结（https://www.cnblogs.com/yuxiaoge/p/11773524.html）

2、Cell

说到cell的使用我还真的是哭笑不得，也是折腾了一下，后来才发现问题的，我在使用vue脚手架搭建项目的时候发现左侧的问题并非居左，而是居中，为了这个问题，我还特意强制去设置它的样式，后来无意中注意到是在App.vue中的默认样式导致的，样式中有一个text-align:center把这个样式去掉就好了。

3、Action sheet

这个前面也有提到（https://www.cnblogs.com/yuxiaoge/p/11776802.html）

4、Message box

MessageBox('提示', '操作成功'); 关于这个组件官网是这样介绍的，可是对于新使用mintUI的码农来说，直接是使用不了的，下面就直接拿出我的代码吧。

messageBox(){
this.$messagebox('提示','操作成功！')
}

把这方法写在methods中，然后去调用它就可以了。传入对象的方法，也是如此，只需要修改括号的内容即可。

MessageBox.alert(message, title);这个方法同上，在this.$messagebox后面跟上alert就可以了。

然后就是then的回调方法，这个也是重点

1 this.$messageBox.confirm('确定执行此操作?').then(action => {
2   console.log(action)//如果点是打印值confirm
3   if(action == 'confirm'){
4       console.log(111)//如果点是打印111
5    }
6 });

MessageBox.prompt(message, title);最后就是这个方法了，其实这个方法和上面是一样的，如出一辙。

this.$messagebox.prompt('请输入姓名?').then(({ value, action }) => {
   console.log(action) //如果点击确认,依然打印的是confirm，也就是确认的意思
   console.log(value) //value打印的是输入框中的值
});

后续继续补充，如有疑问，欢迎留言

猜你喜欢