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

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

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

 

mint-ui 也是餓了麼出品的UI框架(主要是針對移動端),其框架官網: http://mint-ui.github.io/docs/#/en2/quickstartgit

針對移動端項目,有些爲了偷工減料,能夠選擇性的利用現成的UI框架。可是用了以後遇到了一些坑。github

 

1.按需加載:按需引入的方式,咱們沒必要要引入所有的UI組件,須要用什麼就選擇性的用什麼,這樣能夠減少咱們項目的體積,加快加載速度。element-ui

可是按照官網提示來操做,發現會報錯。babel

正確的作法是:框架

修改 .babelrc文件配置ui

主要是 在 plugins 後添加spa

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

相關文章
相關標籤/搜索