使用mintUI的总结

早过忘川 提交于 2020-11-13 04:46:08

一、前言

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

二、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打印的是输入框中的值
});

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

博主QQ:1432208663

2019-11-15 11:36:09



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!