--- theme: condensed-night-purple highlight: atom-one-dark --- # 前言 **在使用vue项目编写的时候，不可避免的会碰到需要时js api来调用组件进行显示的情况** 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件虽然已经提供了，但是由于api的限制，我们只能通过特定的参数来有限的改变组件的样式之前的文章说过可以使用 **new Vue()**、**Vue.extends**等方法来进行改变这些api组件的样式但是同时它们也有个缺点，无法自动**实时更新数据**，也就是没有双向绑定，只能静态布局，为了解决这个痛点我们自己动手封装一个全局js api调用组件，然后再把需要的数据传过去进去更新，自己动手丰衣足食就以饿了么element-ui的通知组件**Notification**为例，实现一个全局通知弹窗下载进度条组件 # 正文使用**Vue.extend**构造器来创建是最为方便的，不过和之前不同的是，这样创建的实例组件只能创建单个，每一次调用都会重新创建一个新的实例，不会对原有的实例进行更新，所以我，我们要对实例进行缓存，以便后续的数据更新这里我以自定义创建一个下载进度弹窗通知为例首先我们创建一个组件文件夹下的js文件 /components/DownLoadNotification/index.js 实现思路是用**Vue.extend**构造组件后，把**api接收的参数**直接传入组件data使用，并为每个实例生成**id**，拿出dom插入到全局body中，当生成多个实例时**动态计算定位**的偏移量避免组件重叠 ```js import Vue from 'vue' import component from './index.vue' const DownLoadNotification = Vue.extend(component) const instances = [] // 实例缓存列表 export const notify = (options) => { let instance; // 单个实例 options.onClose = function() { // 把删除当前实例的方法传入组件内 removeNotify(instance.id) } options.onCloseAll = () => { // 把删除所有实例的方法传入组件内 removeNotifyAll() } // 直接控制实例的data，而不是通过propsData传入 instance = new DownLoadNotification({ data: options, }) instance.id = Date.now(); // 生成id instance.$mount(); // 挂载，生成dom节点 document.body.appendChild(instance.$el) // 把dom节点添加到body全局 instance.visible = true // 先挂载节点再显示节点里的内容，可以出现过渡动画，而不是一开始全部显示 // 计算多个实例时的偏移量 // 第一个不需要计算，把push放到循环下面，数组为空时不会循环，第二次开始则会进行计算 let verticalOffset = 0 instances.forEach((item) => { verticalOffset += item.$el.offsetHeight + 16 // 每个组件高度间隔16px }) verticalOffset += 16 // 首次最下面的组件底部距离最底部也有16px的间隙 instance.verticalOffset = verticalOffset // 计算出来的偏移量赋值到组件中data instances.push(instance) // 缓存实例 return instance } // 删除单个组件实例 function removeNotify(id) { const index = instances.findIndex(item => item.id === id) index !== -1 && instances.splice(index, 1) } // 删除所有组件实例 function removeNotifyAll() { for (let i = instances.length - 1; i >= 0; i--) { instances[i].close(); // 调用组件内的删除方法来同时删除实例和dom } } ``` 删除时既要清空组件dom又要删除实例，所以把在js中定义的**删除实例方法**传入组件，组件**需要删除时调用**即可需要注意的是，当有多个全局组件，删除其中一个时，位置应当发生改变 `所以删除其中的一个组件实例时要重新计算偏移量位置` 重新改造一下 **删除单个组件实例** 的方法，大致做法就是，拿到被删除的当前实例的高度，然后从被删除实例的位置开始遍历，后面的实例逐一删除被删除的实例高度和边距 ```js // 删除单个组件实例 function removeNotify(id) { let index = -1; const len = instances.length; // 未删除前数组总长度 const instance = instances.filter((instance, i) => { // 获取保存当前删除的实例 if (instance.id === id) { index = i; // 保存索引 return true; } return false; })[0]; instances.splice(index, 1); // 删除实例 if (len <= 1) return // 只有一个实例时不需要重新计算位置 const position = instance.position; // 获取实例定位字段 const removedHeight = instance.$el.offsetHeight; // 获取实例高度 for (let i = index; i < len - 1 ; i++) { // 从被删除的位置开始遍历 if (instances[i].position === position) { // 修改的位置定位是否一致 // 将后续元素的定位位置减去上一个删除的元素宽度 + 16px 的首次底部边距 instances[i].$el.style[instance.verticalProperty] = parseInt(instances[i].$el.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px'; } } } ``` 接下来在编写组件/components/DownLoadNotification/index.vue ```html ``` **data**中的自定数据的就相当于使用api传入的参数，当我们保存实例后，可以修改这个实例内的data，来达成实时更新的效果多个实例使用案例参考 ```html ``` ![GIF.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/33d19e1b0ae0452b9e508ccbeefa2b21~tplv-k3u1fbpfcp-watermark.image?) 例子仅供参考，重要的是实现思路，或者可以去饿了么element-ui查看封装的通知组件的源码，实现思路大同小异！