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 年份的數據