快捷導(dǎo)航

通過npm引用的vue組件使用詳解

更新時(shí)間：2017年03月02日 08:46:36 投稿：mrr

本文章通過實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。本文給大家介紹的非常詳細(xì)，需要的的朋友參考下

什么是組件：組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。

如何注冊組件？

需要使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊組件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
  // 選項(xiàng)...后面再介紹
})

如果想要其他地方使用這個(gè)創(chuàng)建的組件，還得個(gè)組件命個(gè)名：

Vue.component('my-component', MyComponent)

命名之后即可在HTML標(biāo)簽中使用這個(gè)組件名稱，像使用DOM元素一樣。

本文章通過實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。

功能說明

多層彈出時(shí)，只有一個(gè)背景層。
彈出層嵌入內(nèi)部組件。
彈出層按鈕支持回調(diào)
源碼下載

實(shí)現(xiàn)

多層彈出時(shí)，只有一個(gè)背景層
利用兩個(gè)組件實(shí)現(xiàn)，一個(gè)背景層組件（只提供一個(gè)背景層，組件名：background.vue），一個(gè)彈出層內(nèi)容管理組件（實(shí)現(xiàn)多個(gè)內(nèi)容層的管理，組件名：master.vue)。
彈出層嵌入內(nèi)部組件

使用vue的component組件實(shí)現(xiàn)，他可以完美支持。

彈出層按鈕支持回調(diào)

在master.vue中實(shí)現(xiàn)，詳細(xì)解析此代碼

html代碼

<template>
 <div> 
  <div class="modal-content" v-for="(comp,index) in comps" v-bind:style="style(index,comp)" >
   <div class="modal-header" >
   header
   </div>
   <div class="modal-body">
   <component :is="comp"></component>
   </div>
   <div class="modal-footer">
   <button type="button" class="btn btn-default" v-on:click="clickHandler(btn.value, comp, index)" v-for="btn in btns" >{{btn.text}}</button>
   </div>
  </div> 
  <hDialogBack ref="back" v-bind:z-index="realIndex-1" ></hDialogBack>
 </div>
</template>

comps：內(nèi)部組件的集合
realIndex：一個(gè)computed屬性，讀取props的mIndex屬性，表示內(nèi)部層的zIndex層級關(guān)系。
component加載組件
btns：表示按鈕的集合，現(xiàn)還不支持組件獨(dú)立配置按鈕列表。
style：此方法用于生成內(nèi)部組件居中的css代碼。

js代碼:

<script>
import hDialogBack from './background'

function getclientPoint () {
 return {
 width: document.documentElement.clientWidth || document.body.clientWidth,
 height: document.documentElement.clientHeight || document.body.clientHeight
 }
}

export default {
 name: 'HDialog',
 data () {
 return {
  comps: []
 }
 },
 props: {
 'btns': {
  type: Array,
  default: function () {
  return [{ text: 'ok', value: 'ok'}, { text: 'cancel', value: 'cancel'}]
  }
 },
 'mIndex': {
  type: Number,
  default: 19861016
 }
 },
 computed: {
 realIndex: function () {
  return this.mIndex
 }
 },
 components: {
 hDialogBack
 },
 methods: {
 open: function (comp) {
  comp.promise = new Promise(function (resolve, reject) {
  comp.resolve = resolve
  comp.reject = reject
  })
  comp.width = comp.width || 600
  comp.height = comp.height || 400
  this.comps.push(comp)
  if (!this.$refs.back.show) {
  this.$refs.back.open()
  }
  return comp.promise
 },
 clickHandler: function (type, comp, index) {
  let self = this
  let close = function () {
  self.comps.splice(index, 1)
  if (self.comps.length === 0 && self.$refs.back.show) {
   self.$refs.back.close()
  }
  }
  /** 只提供promise模式 */
  comp.resolve({'type': type, 'close': close})
 },
 style: function (index, comp) {
  let point = getclientPoint()
  return {
  zIndex: this.realIndex + index,
  width: comp.width + 'px',
  height: comp.height + 'px',
  left: ((point.width - comp.width) / 2) + 'px',
  top: ((point.height - comp.height) / 2) + 'px'
  }
 }
 }
}
</script>

open方法，用于打開彈出層，且返回一個(gè)Promise。
嵌入background.vue組件，用于提供背景層。
clickHandler方法：master.vue組件按鈕的事件響應(yīng)函數(shù)，會resolve在open方法中提供的promise。

css代碼：

<style>
.modal-content {
 position: absolute;
}
</style>

如何實(shí)用

首先需要在頂層引入master.vue，然后嵌入到與app組件平級，如下代碼：

new Vue({
 el: '#app',
 template: '<div><App></App><HDialog ref="hDialog" ></HDialog></div>',
 components: { App }
})

一定要指定ref值，這是彈出層實(shí)現(xiàn)的關(guān)鍵。

在任意一個(gè)子組件中如下使用：

let promise = this.$root.$refs.hDialog.open({
  template: '<div>第二層了</div>'
 })
 promise.then(function (arg) {
  alert('第二層' + arg.type)
  arg.close()
})

使用$root.$refs找到彈出層管理組件
使用調(diào)用其open方法，并接受一個(gè)promise類型的返回值
使用promise即可。

發(fā)布到npm

如果組件需要被其他人引用，最好使用commonjs2規(guī)范，webapck如下配置:

output: {
path: './dist',
filename: '[name].js',
library: 'vue-hdialog',
libraryTarget: 'commonjs2'
}

在npmjs上注冊一個(gè)賬號
利用npm login 登錄
使用npm publish 發(fā)布，如果你想卸載可以用npm unpublish --force.
發(fā)布是需要package.json檢測version和name字段，如果已存，或者是存在被卸載的都不行。
package.json中的main節(jié)點(diǎn)是指定其他引用時(shí)，默認(rèn)導(dǎo)出的文件。

以上所述是小編給大家介紹的通過npm引用的vue組件使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

通過npm引用的vue組件使用詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具