通过npm引用的vue组件使用详解

网络编程 2024/11/9 佚名

3 2 1

什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

如何注册组件？

需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
  // 选项...后面再介绍
})

如果想要其他地方使用这个创建的组件，还得个组件命个名：

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

命名之后即可在HTML标签中使用这个组件名称，像使用DOM元素一样。

本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。

功能说明

多层弹出时，只有一个背景层。
弹出层嵌入内部组件。
弹出层按钮支持回调
源码下载

实现

多层弹出时，只有一个背景层
利用两个组件实现，一个背景层组件（只提供一个背景层，组件名：background.vue），一个弹出层内容管理组件（实现多个内容层的管理，组件名：master.vue)。
弹出层嵌入内部组件

使用vue的component组件实现，他可以完美支持。

弹出层按钮支持回调

在master.vue中实现，详细解析此代码

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：内部组件的集合
realIndex：一个computed属性，读取props的mIndex属性，表示内部层的zIndex层级关系。
component加载组件
btns：表示按钮的集合，现还不支持组件独立配置按钮列表。
style：此方法用于生成内部组件居中的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方法，用于打开弹出层，且返回一个Promise。
嵌入background.vue组件，用于提供背景层。
clickHandler方法：master.vue组件按钮的事件响应函数，会resolve在open方法中提供的promise。

css代码：

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

如何实用

首先需要在顶层引入master.vue，然后嵌入到与app组件平级，如下代码：

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

一定要指定ref值，这是弹出层实现的关键。

在任意一个子组件中如下使用：

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

使用$root.$refs找到弹出层管理组件
使用调用其open方法，并接受一个promise类型的返回值
使用promise即可。

发布到npm

如果组件需要被其他人引用，最好使用commonjs2规范，webapck如下配置:

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

在npmjs上注册一个账号
利用npm login 登录
使用npm publish 发布，如果你想卸载可以用npm unpublish --force.
发布是需要package.json检测version和name字段，如果已存，或者是存在被卸载的都不行。
package.json中的main节点是指定其他引用时，默认导出的文件。

以上所述是小编给大家介绍的通过npm引用的vue组件使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue组件使用,vue,dialog,组件

标签：

vue组件使用,vue,dialog,组件

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“通过npm引用的vue组件使用详解”

通过npm引用的vue组件使用详解

暂无“通过npm引用的vue组件使用详解”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

通过npm引用的vue组件使用详解

vue组件使用,vue,dialog,组件

jQuery实用密码强度检测

完美解决spring websocket自动断开连接再创建引发的问题

评论“通过npm引用的vue组件使用详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

通过npm引用的vue组件使用详解

vue组件使用,vue,dialog,组件

jQuery实用密码强度检测

完美解决spring websocket自动断开连接再创建引发的问题

评论“通过npm引用的vue组件使用详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存