记录使用mint-ui的感想

何处锦绣不灰堆

发布于 2020-05-29 06:55:40

86700

代码可运行

文章被收录于专栏：农历七月廿一农历七月廿一

运行总次数：0

代码可运行

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'
        }
      ]
    };
  }
};