最近公司要重寫運營管理系統，不想再維護之前的backbone了，趕緊要求前端整個重寫。重開新坑，用了兩週多擼出了第一版，收穫很大。在實踐中學習永遠都是最高效的。趁熱把學到的東西都記錄總結下來，也算前端梳理一下思路。

相關部落格：

iView

參考資料：官方文件

快速開發的時候，有現成的UI元件是很好的，很多時候產品只是做個大概底稿，業務又要求快速上線，所以在開發的時候使用iView中的各種元件，不僅能省去很多常用邏輯，還能讓介面風格統一美觀。

總的來說，iView的官方文件是很友好的，各種示例都很清楚。這裡就不贅述了，主要列幾個在使用過程中遇到的坑，還有一些常用的配置。

常用配置

整個專案中會有一寫常用的元件，比如Message，Notice，LoadingBar等，這些元件在不同的介面使用，但是我們希望他們的行為保持一致，並且能自定義。這部分可以一起寫在main.js檔案中：

// main.js
// iView 相關的全域性配置
// message 配置
iView.Message.config({
  top: 50,
  duration: 1.5
})
// notice 配置
iView.Notice.config({
  top: 50,
  duration: 3
})
// LoadingBar 配置
iView.LoadingBar.config({
  // color: '#5cb85c',
 

  // failedColor: '#f0ad4e',
  height: 3
})

另外，loadingBar要配合vue-router的鉤子使用，簡單的示例：

// router/index.js
// 路由鉤子，做一些跳轉的配置
router.beforeEach((to, from, next) => {
  // LoadingBar
  // 除了登入頁，其他都會有Loadingbar
  if (to.name !== 'Login') {
    iView.LoadingBar.start()
  }
  next()
})
// 可以根據跳轉到的頁面，顯示不同顏色的loadingBar
 

router.afterEach(route => {
  // LoadingBar
  // 到登入頁沒有loadingbar，到404是紅色loadingBar
  if (route.name === 'Login') {
    return
  }
  if (route.name === '404') {
    iView.LoadingBar.error()
    return
  }
  iView.LoadingBar.finish()
})

使用iview的Menu元件做導航條，當滑鼠點選導航條跳轉的時候，會有當前active的樣式。但是我們在業務中肯定會有使用程式設計式導航的跳轉，這時候也要同時改變成相應的專案active。這時候就在Menu元件中監聽router變化，取得當前url，然後在nextTick中，通過$nextTick中，通過$refs找到navbar，給currentActiveName 賦值即可。

watch: {
    // 監聽路由，路由改變時更新navbar的active項
    '$route' (to, from) {
      let acvtie = to.fullPath
      this.$nextTick(() => {
        this.$refs.navbar.currentActiveName = acvtie
      })
    }
  },

iView部分元件的自定義事件無法正確觸發

比如Input元件的on-enter事件就無效。這時候可以使用@keyup.native.enter來實現。

在Modal彈框元件中加入表單，提交關閉的問題

在Modal元件中加入表單，點選確定的時候要校驗表單，如果校驗通過，則Modal自動關閉；若校驗失敗，則Modal不關閉。感覺這裡的設計有點問題，要用下邊的方式來實現：

//使用v-modal替代value雙向繫結，來控制Modal是否顯示。
// 給Modal設定loading屬性為true，這樣點選確定按鈕時，按鈕會顯示loading狀態
// 開啟loading時，Modal需要手動設定visible來關閉，而不是點選確定自動關閉。
<Modal v-model="modalShow" :loading="loading"></Modal>
//點選確定後若想保持顯示，則如下寫法。
// 因為loading為true，點選確定Modal就不會自動關閉了。但是要記得
//在nxetTick中把loading重新設定為true。不然確定按鈕一直是loading狀態
//無法再次點選。
this.loading= false
this.$nextTick(() => {
  this.loading= true
})
//當想要點選消失的時候，直接把modalShow置為false即可。
this.modalShow= false