Vue 开发自定义插件学习记录 -- 入门

// message.vue
<template>
  <div class="ive-msg-block" v-if="isShowing">{{msg}}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: ‘‘,
      isShowing: false
    }
  },
  methods: {
    show (notice) {
      this.msg = notice.msg
      this.isShowing = true
      let duration = notice.duration || 1500
      setTimeout(() => {
        this.isShowing = false
      }, duration)
    }
  }
}
</script>
<style scoped>
  .ive-msg-block {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
  }
</style>

// message.js 
import Vue from ‘vue‘
import message from ‘./message.vue‘

var _msgConstructor = Vue.extend(message)
var imessage = () => {
  // 防止多次注册
  if (imessage.installed) return
  // 获取实例（此处可通过传递属性值给模板，模板可通过props属性接受）
  var instance = new _msgConstructor()
  // 获取DOM，并挂载到body中
  var _msgComponent = instance.$mount()
  document.body.appendChild(_msgComponent.$el)
  // 返回需要后需添加到Vue全局中的方法和属性
  return {
    component: instance,
    notice (noticeProps) {
      instance.show(noticeProps)
    }
  }
}

export default imessage

// index.js
import notification from ‘./message‘
let messageInstance

function getMessageInstance () {
  messageInstance = notification && notification()
  return messageInstance
}

// 调用初始化方法，获得实例并挂载到html中，并根据传入的参数显示对应的消息和显示时长
function notice (options) {
  let instance = getMessageInstance()
  instance.notice(options)
}

// 此处你可能有疑惑，为什么做了许多重复的事，其实本来我想实现的插件功能应该更加强大，但是初学遇到许多问题就暂时先实现一个简单的功能，然后预留接口，方便后续扩展
export default {
  name: ‘Message‘,
  install (Vue) {
    Vue.prototype.$Message = this
  },
  show (options) {
    this.message(options)
  },
  message (options) {
    notice(options)
  }
}

import  Message from ‘./Plugins/index‘
Vue.use(Message)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})