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,
       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%')//根据需要传入错误提示信息
      }
    ......

如上，如果是一般的异常，直接使用默认错误提示即可，无需传参。如需要自定义错误信息及宽度，传入相应参数即可。

另外，由于是全局注入的插件，需要在当前页面销毁的时候进行关闭。