VUE項目中使用mint-ui框架總結

針對PC端，element-ui可謂是首選了，UI體驗效果很好。

element-ui 框架官網： http://element.eleme.io/#/zh-CN/component/installation

 

mint-ui 也是餓了么出品的UI框架（主要是針對移動端），其框架官網： http://mint-ui.github.io/docs/#/en2/quickstart

針對移動端項目，有些為了偷工減料，可以選擇性的利用現成的UI框架。但是用了之后遇到了一些坑。

 

1.按需加載：按需引入的方式，我們不必要引入全部的UI組件，需要用什么就選擇性的用什么，這樣可以減小我們項目的體積，加快加載速度。

但是按照官網提示來操作，發現會報錯。

正確的做法是：

修改 .babelrc文件配置

主要是 在 plugins 后添加

["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
]]

完整的 .babelrc文件代碼為：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]
  ],
}

 

在入口文件引入需要用到的UI組件

import {
  DatetimePicker,
  Toast,
  Indicator,
  Picker,
  Popup
} from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)
Vue.component(Toast)
Vue.component(Indicator)
Vue.component(Picker.name, Picker)
Vue.component(Popup.name, Popup);

比如現在我只需要用mint-ui 框架中的 DatetimePicker , Toast , Indicator , Picker , Popup

這樣就可以全局引入這些UI組件了。

 

官網提示說 

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Cell)
 */

但是發現寫成  Vue.use(Toast)  在頁面初始化時會出現一個小黑點后消失，其實這是Toast樣式里面的padding 起的作用。也就是  Vue.use(Toast)   會在頁面加載時初始化。

所以為了避免出現這個問題，采用 Vue.component 引入方式比較好。

 

2.使用了Toast 或者 Indicator等組件時，按照官方文檔，這樣寫就會出現“Uncaught ReferenceError: Toast is not defined”的錯誤

錯誤截圖為

Toast 被當做是未知的變量，

此時的做法是 引入了Toast 就需要把該變量暴露到全局對象里面

window.Toast= Toast
window.Indicator= Indicator
...

 

3.Toast等組件避免重復彈出，按需關閉

比如 在做表單驗證時，表單輸入不能為空，一直點 提交按鈕，會一直出現Toast 組件，而這時之前的Toast並沒有完全消息，這里前端處理的時候需要設置下標記，判斷Toast是否存在

另外 有這樣的需求，比如在 登錄頁面，用戶提交表單后，登錄成功，會跳轉到新的頁面。而這時 Toast需要過2秒才消失，在進入另外一個頁面我們會發現 此時的Toast 仍然存在。

此時的做法是：

var toastFlag = ''

//把Toast賦值給一個新的變量
toastFlag = Toast("登陸成功")

//beforeDestroy生命周期關閉Toast
beforeDestroy:function(){
    toastFlag && toastFlag.close()
}

 

4. 引入 Datetime picker 組件，時間選擇數據少，當前時間的10年前和未來的10年

但是某些項目中，需要更多選擇年份的需求。該插件提供了 startDate  和 endDate 屬性

:startDate="new Date('1970/12/31 12:00:00')"
:endDate="new Date('2100/12/31 12:00:00')"

上面例子 意思是選擇 1970 ~ 2100 年份的數據