Vue编写时的一些注意事项（9）--简单插件的开发

插件

插件的功能范围：

1. 添加全局方法或者属性。如: vue-custom-element Vue.use() ,这里有时候手滑写成user(),哈哈哈哈哈哈，被骂好几次
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。Vue.prototype.methodsName = method
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

开发插件：

官网说法，看不太懂

//Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

可以参考一下这大佬的插件一条龙,已经讲的十分详细，不多赘述

将toast 组件的部分改动了一下：
·

<template>
  <div>
  	<!--这里改成了列表渲染，并动态进行定位-->
    <div class="toast"  ref='toast' :class="{active: toastHidden}" v-for="(item,index) in textArr" :key="index"
    :style="{top:`${index*5+5}%`}"
    >
      <div class="toast-warpper" >{{item.msg}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-toast',
  data () {
    return {
      text: '',
      toastHidden: false,
      //消息列表
      textArr:[]
    }
  },
  created () {
    // this.toastPlugin()
  },
  components: {
  },
  methods: {
    toastPlugin (msg, time) {
      this.text = msg
      //点一下数组加一条数据
      this.textArr.push({msg:msg+this.textArr.length})
      this.toastHidden = true
      let that = this
      setTimeout(() => {
        // this.toastHidden = false
        //过一段时间减少一条，其实这里减少的时候写法应该不是这样，暂时这样写
        that.textArr.splice(0,1);
      }, time)
    }
  }
}
</script>

<style>
  .toast-enter,.toast-leave-to{
    opacity: 0;
  }
  .toast-enter-active,.toast-leave-active{
    transition: all 1s;
  }
  .toast {
    position: absolute;
    left: 50%;
    /* 把定位去掉了，放在渲染列表的时候动态定位*/
    /* top: 50%; */
    transform: translate(-50%, -50%);
    /* width: 0px; */
    /* min-height: 0px; */
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
    padding:0 15px;
  }
  .toast.active {
    /* width: 150px; */
    /* min-height: 25px; */
    opacity: 1;
    z-index: 11;
  }
</style>

运行效果：