vue編寫以plugin形式調用的插件——以全局錯誤展示界面為例

應用場景：

使用vux的小伙伴應該能體會到，以插件形式調用的toast、loading用起來都停不錯的，只需要main.js中添加為vue的實例方法，就可以在頁面中根據需要隨時隨地的進行調用。

同樣，項目中也需要一些公用的頁面，如全局的訪問異常頁面。如果采用普通的組件引用，則需要在每個需要用到的頁面中進行引用，就比較麻煩了。

最好的就是做成像toast插件一樣能直接調用的插件，是最好的解決方法。

示例代碼：

components/error.vue

<template>
  <div class="error tc" v-show="show">
    <Icon class="icon c_c" type="info" is-msg></Icon>
    <p class='msg f16 c_6' :style="{'width':width}">{{msg||"訪問出錯，請返回重試！"}}</p>
    <button @click='goToIndex' size='mini'>返回首頁</button>
  </div>
</template>

<script>
  import { Icon } from 'vux'
  export default {
    components: {
      Icon
    },
    props: {
      msg: String,
      show: Boolean,
      width: String //百分比
    }
    ......
  }
</script>
<style scoped>
  .error {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  
  .icon {
    margin: 1.2rem auto .4rem auto;
    font-size: 70px!important;
  }
  
  button {
    margin-top: 1rem;
  }
  
  .msg {
    margin: 0 auto;
    width: 60%;
  }
</style>

注：width參數用於自定義設置錯誤信息展示的寬度（默認寬度為60%，可以通過width參數進行自定義）。

components/error.js

import errorComp from './error.vue'

const error = {};

// 注冊Toast
error.install = function(Vue) {
  // 生成一個Vue的子類
  // 同時這個子類也就是組件
  const ErrorConstructor = Vue.extend(errorComp)
  // 生成一個該子類的實例
  const instance = new ErrorConstructor();

  // 將這個實例掛載在我創建的div上
  // 並將此div加入全局掛載點內部
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  // 通過Vue的原型注冊一個方法
  // 讓所有實例共享這個方法 
  Vue.prototype.$error = (msg) => {
    instance.msg = msg;
    instance.show = true;
  }
  //隱藏並重置插件
  Vue.prototype.$errorHide = () => {
    instance.show = false;
    instance.msg = '';
  }
}

export default error

頁面引用：

    beforeDestroy(){
      //關閉並重置錯誤展示插件
      this.$errorHide()
    },
    created() {
      //必要參數缺失，則展示錯誤頁面
      if(!this.$route.params.coupon_id) {
        this.$error('當前訪問錯誤，請稍后重試'，'55%')//根據需要傳入錯誤提示信息
      }
    ......

如上，如果是一般的異常，直接使用默認錯誤提示即可，無需傳參。如需要自定義錯誤信息及寬度，傳入相應參數即可。

另外，由於是全局注入的插件，需要在當前頁面銷毀的時候進行關閉。