記錄使用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基本是一樣的，所以還是慢慢使用吧。喜歡的可以關注一下，相互交流。