dem isa 我們 isshowing 人的 暴露 doc directive 了解

首先，你需要了解插件實現的基本原理 插件基本原理： 我們都知道用Vue.use註冊插件，那你知道Vue.use(plugin) 幹了什麽？ 以下是我對Vue官網的一些摘錄和個人的理解 Vue.use( plugin ) 參數： {Object | Function} plugin 用法： 安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。 install 方法調用時，會將 Vue 作為參數傳入。 該方法需要在調用 new Vue() 之前被調用。 當 install 方法被同一個插件多次調用，插件將只會被安裝一次。 舉個栗子： Vue.use(MyPlugin) // 相當於：1）如果MyPlugin是一個對象，等價於 MyPlugin.install(Vue)。 　　　　　　　　　　　　　　　2）如果MyPlug是一個函數， 則等價於 MyPlugin(Vue) 結論：如果引入的插件是一個對象，那麽此對像必須有install 方法，因為 Vue.use要用。 如果是函數，直接當做install方法調用。 由上面的結論可知，如果我們開發的插件是以對象形式出現，那麽它的基本結構應該如下所示： (以下摘錄自Vue官方文檔) // MyPlugin.js 文件 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) { // 邏輯... } } export default MyPlugin 到此，你可能對如何在全局中添加方法有所感悟，但對於如何調用此方法並在頁面中顯示相應的內容可能還是有所疑問。 下面，就跟隨我的腳步，依照我寫的demo一起學習下吧。 以下是我寫的 Vue 插件 的小demo

目標： 固定在窗口頂部的消息提示窗 開發流程： 1、首先編寫出符合要求的組件模板

// 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>

2、利用 Vue.extend() 方法對其進行初始化封裝

// 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

3、由於我想要寫的插件是以對象的形式暴露出去，故一定要記得添加install方法，並在install方法中，將插件需要用到的方法添加到Vue的原型鏈中。

// 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)
  }
}

4、最後，在入口文件引入並註冊

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/>‘
})

總結：這是我寫的插件初版原稿，其中有許多可以優化的地方，也有許多可以擴展的地方，比如可以參照其他成熟UI組件的樣式，添加多種樣式的提示框，可以調節窗口的位置，可以手動關閉等功能。 這篇文章主要的目的是為了記錄下我從小白到入門的學習過程，同時也希望能對其他想要學習Vue的朋友們有所幫助。

Vue 開發自定義插件學習記錄 -- 入門