摘要：組件結(jié)構(gòu)同組件結(jié)構(gòu)通過方法獲取元素的大小及其相對(duì)于視口的位置，之后對(duì)提示信息進(jìn)行定位。可以用來進(jìn)行一些復(fù)雜帶校驗(yàn)的彈窗信息展示，也可以只用于簡(jiǎn)單信息的展示。可以通過屬性來顯示任意標(biāo)題，通過屬性來修改顯示區(qū)域的寬度。

預(yù)覽地址 http://haogewudi.me/kiko/inde...

源碼地址 https://github.com/rascalHao/...

vue-cli將你的vue項(xiàng)目初始化建好 vue init webpack my-project

平常我們引入插件的流程是：

npm i  -S

import Vue from "vue"
import xxx from "xxx"
Vue.use(xxx)

所以可以在node_modules下面新建一個(gè)你的開發(fā)目錄，我這里命名為kiko,
所以現(xiàn)在大概引入我們的開發(fā)插件的步驟為(項(xiàng)目最終構(gòu)建完會(huì)采取發(fā)布npm包的形式)

  import Vue from "vue"
  import Kiko from "../node_modules/kiko/index.js"
  Vue.use(Kiko)

在你的項(xiàng)目目錄下通過npm init指令來初始化一個(gè)package.json文件，默認(rèn)指定你的入口文件index.js,并在你的項(xiàng)目根目錄下新建一個(gè)index.js入口文件

這里會(huì)構(gòu)建4中類型的彈窗組件（message、toolTip、confirm、loading）,基本的結(jié)構(gòu)如圖所示

Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開方法 install 。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器 , 第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象;通過全局方法 Vue.use() 使用插件;可以再次看下vue官網(wǎng)的插件介紹

    import KikoMessage from "./packages/message/index.js"
    import KikoToolTip from "./packages/tips/index.js"
    import KikoConfirm from "./packages/confirm/index.js"
    import KikoLoading from "./packages/loading/index.js"

    const install = function(Vue) {
      Vue.component(KikoMessage.name, KikoMessage)
      Vue.component(KikoToolTip.name, KikoToolTip)
      Vue.component(KikoConfirm.name, KikoConfirm)
      Vue.component(KikoLoading.name, KikoLoading)

      Vue.prototype.$kiko_tooltip = KikoToolTip.installToolTip
      Vue.prototype.$kiko_message = KikoMessage.installMessage
    }
    export default install

在項(xiàng)目的根目錄創(chuàng)建message組件，通過

Vue.prototype.$kiko_message = function (methodOptions) {

// 邏輯...

}
來添加實(shí)例方法全局以調(diào)用this.$kiko_message()的方式來調(diào)用message

message組件結(jié)構(gòu)

main.vue

index.js

    import Vue from "vue"
    import Message from "./src/main.vue"

    Message.installMessage = function(options) {
      if (options === undefined || options === null) {
        options = {
          message: ""
        }
      } else if (typeof options === "string" || typeof options === "number") {
        options = {
          message: options
        }
      }
      var message = Vue.extend(Message)

      var component = new message({
        data: options
      }).$mount()
      document.querySelector("body").appendChild(component.$el)
    }

    export default Message

到這里的時(shí)候可以看下前面的入口文件介紹，你需要通過Vue.component注冊(cè)為組件，并把Message.installMessage方法綁定到Vue.prototype.$kiko_message上。

沒有選擇通過固化在頁面中的方式來引入toolTip,因?yàn)榭紤]到可能在頁面中的任何地方引入toolTip,如果固化了，將會(huì)大大限制toolTip的使用場(chǎng)景。所以采用了一個(gè)綁定到Vue.prototype的this.$kiko_tooltip全局方法來觸發(fā)，這樣就可以自定義觸發(fā)方式，只需要通過傳入$event就可以自動(dòng)地定位任何有需要的元素了。

toolTip組件結(jié)構(gòu)

同message組件結(jié)構(gòu)

main.vue

index.js

  import Vue from "vue"
  import ToolTip from "./src/main.vue"

  ToolTip.installToolTip = function(event, opt) {

    var options = opt

    var rect = {};
    ["top", "left"].forEach(function(property) {
      var scroll = property === "top" ? "scrollTop" : "scrollLeft"
      rect[property] = event.target.getBoundingClientRect()[property] +
        document.body[scroll] +
        document.documentElement[scroll]
    });
    ["height", "width"].forEach(function(property) {
      rect[property] = event.target.getBoundingClientRect()[property]
    });
    options.rect = rect
    var toolTip = Vue.extend(ToolTip)

    var component = new toolTip({
      data: options
    }).$mount()
    event.target.appendChild(component.$el)
  }

  export default ToolTip

通過Element.getBoundingClientRect()方法獲取元素的大小及其相對(duì)于視口的位置，之后對(duì)提示信息進(jìn)行fixed定位。

confirm在保留頁面的情況下會(huì)彈出一個(gè)對(duì)話框，適合一些場(chǎng)景更大的情況。可以用來進(jìn)行一些復(fù)雜帶校驗(yàn)的彈窗信息展示，也可以只用于簡(jiǎn)單信息的展示。可以通過title屬性來顯示任意標(biāo)題，通過width屬性來修改顯示區(qū)域的寬度。

confirm組件結(jié)構(gòu)

同message組件

main.vue

index.js

  import Vue from "vue"
  import Confirm from "./src/main.vue"

  export default Confirm

這里通過組件的方式進(jìn)行引入，可以只是簡(jiǎn)單地信息提示，也可以自己進(jìn)行一些復(fù)雜的校驗(yàn)。對(duì)組件的顯示與隱藏這里引用了.sync修飾符,也可以通過v-if指令。運(yùn)用slot來分發(fā)內(nèi)容。

考慮到可能不需要整屏渲染,只需要局部加載loading,在指定的位置可以按需通過自定義指令來實(shí)現(xiàn)，通過Element.getBoundingClientRect()方法根據(jù)需要的元素位置、區(qū)域大小自動(dòng)定位；若想整屏渲染，則需要加個(gè).fullscreen修飾符。

loading組件結(jié)構(gòu)
同message組件

main.vue

index.js

  import Vue from "vue"
  import Loading from "./src/main.vue"

  const loadingConstructor = Vue.extend(Loading)

  Vue.directive("kiko-loading", {
    update: function(el, binding) {
      if (binding.oldValue != binding.value) {
        const options = {}
        options.fullScreen = binding.modifiers.fullscreen ? true : false;
        if (options.fullScreen) {
          options.top = 0
          options.left = 0
          options.width = "100%"
          options.height = "100%"
        } else {
          ["top", "left"].forEach(function(property) {
            var scroll = property === "top" ? "scrollTop" : "scrollLeft"
            options[property] = el.getBoundingClientRect()[property] +
              document.body[scroll] +
              document.documentElement[scroll] +
              "px"
          });
          ["height", "width"].forEach(function(property) {
            options[property] = el.getBoundingClientRect()[property] + "px"
          });
        }
        var component = new loadingConstructor({
          data: options
        }).$mount()
        var node = document.querySelector(".kiko-loading")
        if (node && node.parentNode) {
          node.parentNode.removeChild(node)
        }
        if (binding.value === true) {
          document.querySelector("body").appendChild(component.$el)
        } else {
          var node = document.querySelector(".kiko-loading")
          if (node && node.parentNode) {
            node.parentNode.removeChild(node)
          }
        }
      }
    }
  })

  export default Loading

確保你的項(xiàng)目的根目錄的package.json文件已經(jīng)建好

登錄npm官網(wǎng)注冊(cè)

在你的項(xiàng)目目錄下登錄npm login（之后按提示填寫信息）

發(fā)包npm publish

如果執(zhí)行npm publish出現(xiàn)錯(cuò)誤，可能是你的包名已經(jīng)被注冊(cè)過，在npm 官網(wǎng)上搜索一下是否已被注冊(cè)了。若發(fā)包成功，你就可以在npm官網(wǎng)上搜索到自己的包。
發(fā)包成功后，就可以通過
`
import Vue from "vue"
// 我的npm包是kiko-rascalhao
import Kiko from "kiko-rascalhao"
Vue.use(Kiko)
`
引入你的插件啦 

由于本人學(xué)識(shí)有限，有很多需要提升的地方，望大家多多指教。