你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的api是其优点。而同时因为其api的多样性和丰富性,所以他的很多开发方式就和一切基于组件的react不同,如果没有对vue的api(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习vue的时候先要对vue核心的所有api都有一个了解。
举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到。而在以vue作为核心框架的前端项目中,因为vue本身是一个组件化和虚拟dom的框架,要实现一个通知组件的展示当然是非常简单的。但因为通知组件的使用特性,直接在模板当中书写组件并通过v-show或者props控制通知组件的显示显然是非常不方便的,而且如果要在action或者其他非组件场景中要用到通知,那么纯组件模式的用法也无法实现。那么有没有办法即用到vue组件化特性方便得实现一个通知组件的展现,又能够通过一个简单的方法调用就能显示通知呢?本文就是来讲述这个实现方法的。
目标
实现一个vue的通知组件,可以直接在组件内调用
通过方法调用,比如vue.$notify({...options})来调用通知组件
结合上述两种方式,复用代码
实现通知组件
这一步非常的简单,我相信做过一点vue开发的同学都能写出一个像模像样的通知组件,在这里就不赘述,直接上代码
<template> <transition name="fade" @after-leave="afterleave" @after-enter="setheight"> <div v-show="visible" :class="['notification']" :style="style" @mouseenter="cleartimer" @mouseleave="createtimer" > <span class="content">{{content}}</span> <a class="btn" @click="handleclose">{{btn || '关闭'}}</a> </div> </transition> </template> <script> export default { name: 'notification', props: { content: { type: string, default: '' }, btn: { type: string, default: '' } }, data () { return { visible: true } }, computed: { style () { return {} } }, methods: { handleclose (e) { e.preventdefault() this.doclose() }, doclose () { this.visible = false this.$emit('close') }, afterleave () { this.$emit('closed') }, cleartimer () {}, createtimer () {}, setheight () {} } } </script>
<style lang="stylus" scoped> .notification display: flex background-color #303030 color rgba(255, 255, 255, 1) align-items center padding 20px position fixed min-width 280px box-shadow 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12) flex-wrap wrap transition all .3s .content padding 0 .btn color #ff4081 padding-left 24px margin-left auto cursor pointer </style>
在这里需要注意,我们定义了一个叫做style的computed属性,三个方法cleartimer,createtimer,setheight,但他们的内容都是空的,虽然在模板上有用到,但是似乎没什么意义,在后面我们要扩展组件的时候我会讲到为什么要这么做。
创建完这个组件之后,我们就可以在模板中使用了<notification btn="xxx" content="xxx" />
实现通过方法调用该通知组件
继承组件
在实现通过方法调用之前,我们需要扩展一下这个组件,因为仅仅这些属性,并不够我们使用。在使用方法调用的时候,我们需要考虑一下几个问题:
- 显示通知的定位
- 组件的出现和自动消失控制
- 连续多次调用通知方法,如何排版多个通知
在这个前提下,我们需要扩展该组件,但是扩展的这些属性不能直接放在原组件内,因为这些可能会影响组件在模板内的使用,那怎么办呢?这时候我们就要用到vue里面非常好用的一个api,extend,通过他去继承原组件的属性并扩展他。
我们先来看代码,创建一个叫做fun-notification.js的文件,内容如下:
import notification from './notification.vue' export default { extends: notification, computed: { style () { return { position: 'fixed', right: '20px', bottom: `${this.verticaloffset + 20}px` } } }, data () { return { verticaloffset: 0, visible: false, height: 0, autoclose: 3000 } }, mounted () { this.createtimer() }, methods: { createtimer () { if (this.autoclose) { this.timer = settimeout(() => { this.doclose() }, this.autoclose) } }, cleartimer () { if (this.timer) { cleartimeout(this.timer) } }, setheight () { this.height = this.$el.offsetheight } } }
我们可以看到之前空实现的几个方法在这里被实现了,那么为什么要在原组件上面加上那些方法的定义呢?因为需要在模板上绑定,而模板是无法extend的,只能覆盖,如果要覆盖重新实现,那扩展的意义就不是很大了。当然同学们可以自己抉择。
在使用extend的时候注意以下两个点:
- 方法和属性的定义是直接覆盖的
- 生命周期方法类似余mixin,会合并,也就是原组件和继承之后的组件都会被调用,原组件先调用
通过方法调用该组件
最后我们需要做的就是通过方法调用这个已经继承过的组件了,我们先来看一下源码的实现:
// function-component.js import vue from 'vue' import component from './fun-component' const notificationconstructor = vue.extend(component) const instances = [] let seed = 1 const removeinstance = (instance) => { const len = instances.length if (!instance) return const index = instances.findindex(inst => instance.id === inst.id) instances.splice(index, 1) if (len <= 1) return const removedheight = instance.vm.height for (let i = index; i < len - 1; i++) { instances[i].verticaloffset = parseint(instances[i].verticaloffset) - removedheight - 16 } } const notify = function (options) { const { onclose, ...rest } = options if (vue.prototype.$isserver) return options = options || {} const id = `notification_${seed++}` const instance = new notificationconstructor({ propsdata: { ...rest } }) instance.id = id instance.vm = instance.$mount() document.body.appendchild(instance.vm.$el) instance.vm.visible = true let verticaloffset = 0 instances.foreach(item => { verticaloffset += item.$el.offsetheight + 16 }) verticaloffset += 16 instance.verticaloffset = verticaloffset instances.push(instance) instance.vm.$on('closed', () => { if (typeof onclose === 'function') { onclose(instance) } removeinstance(instance) instance.vm.$destroy() }) return instance.vm } export default notify
首先通过const notificationconstructor = vue.extend(component),我们得到了一个类似于vue的子类,我们就可以通过new notificationconstructor({...options})的方式去创建vue的实例了,同时通过该方式创建的实例,是有组件定义里面的所有属性的。
在创建实例之后,可以通过instance.$mount()手动将组件挂载到dom上面,这样我们可以不依赖vue组件树来输出dom片段,达到*显示通知的效果。
这中间的实现主要就是维护一个通知数组,在创建时推入,在消失时删除,这个过程并没有规定一定要如此实现,我就不赘述,以免限制大家的思路,大家可以根据自己的想法去实现。
使用该方法
要使用这个通知方法非常简单,我们可以直接import这个文件来使用,比如:
import notify from './function-component.js' notify({ content: 'xxx', btn: 'xxx' })
当然我们很多场景是在组件内部调用,为了方便在组件内使用,不需要每次都import,我们可以把这个方法包装成一个vue的插件。我们创建一个index.js,内容如下:
import notification from './notification.vue' import notify from './function' export default (vue) => { vue.component(notification.name, notification) vue.prototype.$notify = notify vue.notify = notify }
然后在项目内,我们可以通过:
import notify from '/path/to/notification/module' vue.use(notify)
这样之后,在组件内就可以直接通过this.$notify({...options})来调用通知了,同时还可以通过vue.notify({...options})在其他环境下调用,大家可以在自己的项目中尝试一下。
总结
到这里,关于如何实现通过方法调用一个vue组件内容就差不多了。在这里我们涉及到的vue技术点有如下几点:
- 通过extend配置进行组件的扩展
- 通过vue.extend创建一个vue的子类,用来动态创建vue实例
- 通过vue实例主动将组件内容挂载到dom
vue拥有非常多的api,如果在使用vue之前没有系统的学习过vue的核心知识和api,你可能压根就不知道有这样的实现方式,所以想要学好vue,系统得对vue的核心进行学习是非常重要的一个环节。
以上所述是小编给大家介绍的你不知道的vue技巧之--开发一个可以通过方法调用的组件详解整合,希望对大家有所帮助
上一篇: BeautifulSoup获取指定class样式的div的实现
下一篇: Go语言中的函数式编程实践