專案中如果很多地方用到同一個模態框元件，每次在頁面中import引用是不是很麻煩？現在教大家一種很方便的封裝方法，只需呼叫js方法就可以實現。廢話不說，先上圖講下整體流程，會把程式碼貼出來。

1.先寫好你用的元件。根據業務不同元件不同，這裡只是我們專案中的檔案。

2.新建js檔案，這裡是我建的js檔案。


可以直接使用element中封裝的$msgbox方法，h標籤中引用元件名稱，props裡面可以放元件中的傳值，on方法裡面呼叫回撥函式。

噔噔噔，給大家貼程式碼了！！！自己寫的元件就不貼了，裡面是專案中的業務。
modal-attr.js檔案

export default function modalAttr(val, callback, keyNum) {
  const h = this.$createElement
  return new Promise((resolve, reject) => {
    this.$msgbox({
      title: '屬性規格',
      customClass: 'upload-form',
      closeOnClickModal: false,
      showClose: false,
      message: h('div', { class: 'common-form-upload' }, [
        h('attrFrom', {
          props: {
            currentRow: val,
            keyNum: keyNum
          },
          on: {
            getList() {
              callback()
            }
          }
        })
      ]),
      showCancelButton: false,
      showConfirmButton: false
    }).then(() => {
      resolve()
    }).catch(() => {
      reject()
      this.$message({
        type: 'info',
        message: '已取消'
      })
    })
  })
}
 

接下來要在main.js中全域性註冊使用。

import attrFrom from './components/attrFrom'
Vue.component('attrFrom', attrFrom)

這樣就可以全域性使用拉~~~~
使用方法：

this.$modalAttr(this.formDynamics, function() {
  _this.productGetRule()
})

呼叫方法的時候，裡面傳值可根據你的需求進行傳值，這裡只是個例子，給大家個思路。下次再來講封裝的另一種方法，想知道的朋友們要持續關注crmeb噢。