专栏首页用户7363577的专栏记录使用mint-ui的感想

记录使用mint-ui的感想

mint-ui

今天记录一下使用mint-ui的心得,首先说明一下mint-ui是用来做手机端界面的ui库,这个ui库我是做项目的时候使用到了,所以今天简单的说明记录一下该库的一些存在的一些可能会出问题的地方,毕竟刚开始使用,不是很熟练,所以简单的写一下。

vue安装引入mint-ui

和引入平常的ui库一样,在终端输入:

npm i mint-ui -S

main.js中引入:

import MintUI from 'mint-ui'
Vue.use(MintUI)

个别的样式是需要单独引入的

部分引入的话,直接在main.js中引入需要的功能:

import { Button, Cell } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
举例使用第一类:直接引用

举例使用一个提示信息吧:

import { Toast } from 'mint-ui';
let instance = Toast('提示信息');
setTimeout(() => {
  instance.close();
}, 2000);

下面将这个提示语句封装起来:

import {Toast} from 'mint-ui';
/**
 * @instance mint-ui 提示语句
 * @param val 需要传递的话
 */
export function instance(val) {
  let instance = Toast(val);
  setTimeout(() => {
    instance.close();
  }, 2000);
}

建议:类似于这样的提示我基本都会封装起来,目的很简单的,我们使用的时候麻烦程度是一样的,但是更改的时候就会简单很多,直接一个文件更改就可以,例如产品让你将提示时间改为3秒,那个时候你总不能一个一个来吧,直接一个文件改是最好的。

举例使用第二类:绑定数据
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

mint-ui是一个比较好用的移动端ui库,基本使用是很简单的,和element基本是一样的,所以还是慢慢使用吧.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 做个简单的loading效果+写个原生的懒加载

    首先要感谢我家里的网速,如果特别好的话,我可能不会想到实现这个小玩意,我百度一个东西的时候发现下面这三个小球一直晃悠,实在是很烦,决定看看这个是怎么实现的,所以...

    何处锦绣不灰堆
  • Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    何处锦绣不灰堆
  • vue+element踩坑记-动态设置表头(以时间作为表头)

    我们都知道element提供了table的组件,非常的好用,前面我也写过一些,但是这次的需求是这样的,就是用户可以自己选择时间,自己选择天数,选择以后呢就可以直...

    何处锦绣不灰堆
  • 「 从0到1学习微服务SpringCloud 」11 补充篇 RabbitMq实现延迟消费和延迟重试

    延迟队列就是进入该队列的消息会被延迟消费的队列。而一般的队列,消息一旦入队了之后就会被消费者马上消费。

    KEN DO EVERTHING
  • RabbitMQ如何解决各种情况下丢数据的问题

    如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:854630135...

    java架构师
  • 关于“AI是不是胡扯”之争:这是中国科技圈的胜利 | 观点

    镁客网
  • 学好加工中心UG编程?先弄懂这些问题

    加工中心编程是一个合格加工中心操作员必须掌握的技艺,然而编程也是困扰很多朋友的难题。下面小编就带您系统的了解UG编程,相信可以打开您学习加工中心UG编程的兴趣之...

    UG数控编程
  • 【视频编码】 Content Aware ABR技术(十二)

    在本系列前面的帖子中,我们连续梳理了Netflix、YouTube、Beamr、EuclidIQ、Bitmovin、Harmonic、V-Nova、Cisco、...

    用户1324186
  • JS:XML 解析

    WEBJ2EE
  • 【全网扫描】获取CDN背后网站的真实IP

    0x00 前言 事先声明: 方法可能存在漏报(嗯, 在人品差的情况下) 唔, 我们使用 www.wooyun.org 作为案例。 首先从 www.woo...

    用户1467662

扫码关注云+社区

领取腾讯云代金券