网站优化

怎么玩转微信小程序_通过npm引用的vue组件使用详

作者:admin 发布时间:2021-01-12
通过npm引用的vue组件使用详解     投稿:mrr   本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。本文给大家介绍的非常详细,需要的的朋友参考下

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

  如何注册组件?

  需要使用Vue.ponent方法注册组件。Vue.extend方法格式如下:

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

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

ponent('my-component', MyComponent)

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

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

功能说明

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

实现

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

弹出层按钮支持回调

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

html代码

 template 
 div 
 div v-for="(comp,index) in com凡科抠图" v-bind: 
 div 
 header
 /div 
 div 
 component :is="comp" /component 
 /div 
 div 
 button type="button" 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 

com凡科抠图:内部组件的集合 puted属性,读取pro凡科抠图的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 {
 com凡科抠图: []
 pro凡科抠图: {
 'btns': {
 type: Array,
 default: function () {
 return [{ text: 'ok', value: 'ok'}, { text: 'cancel', value: 'cancel'}]
 'mIndex': {
 type: Number,
 default: 
 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
 p)
 if (!this.$refs.back.show) {
 this.$refs.back.open()
 p.promise
 clickHandler: function (type, comp, index) {
 let self = this
 let close = function () {
 凡科抠图.splice(index, 1)
 if (凡科抠图.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组件平级,如下代码:
使用npm publish 发布,如果你想卸载可以用npm unpublish --force. 发布是需要package.json检测version和name字段,如果已存,或者是存在被卸载的都不行。 package.json中的main节点是指定其他引用时,默认导出的文件。

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



收缩