这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

在使用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中,当生成多个实例时动态计算定位的偏移量避免组件重叠

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中定义的删除实例方法传入组件,组件需要删除时调用即可

需要注意的是,当有多个全局组件,删除其中一个时,位置应当发生改变

所以删除其中的一个组件实例时要重新计算偏移量位置

重新改造一下 删除单个组件实例 的方法,大致做法就是,拿到被删除的当前实例的高度,然后从被删除实例的位置开始遍历,后面的实例逐一删除被删除的实例高度和边距

// 删除单个组件实例
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

<template>
 <el-collapse-transition>
   <div v-if="visible" :class="['DownLoadNotification']" :style="positionStyle">
     <div class="header">
       <span>{{ fileName }}</span>
       <span>{{ fileSize }}</span>
     </div>
     <el-progress
       :percentage="downLoadProgress"
       :status="downStatus"
       :stroke-width="15"
     ></el-progress>
     <el-button @click="close" size="mini">关 闭</el-button>
   </div>
 </el-collapse-transition>
</template>
<script>
export default {
 data() {
   return {
     /* 自定义数据 */
     fileName: "",
     fileSize: "",
     downLoadProgress: 0,
     downStatus: "",

     /* 组件基础数据 */
     id: null, // 实例id
     visible: false, // 显示控制按钮
     position: "bottom-left", // 显示方位
     verticalOffset: 0, // 位置偏移量
     onClose: null, // js中传入的删除当前组件方法
     onCloseAll: null, // js中传入的删除所有组件方法
  };
},
 computed: {
   // 默认纵向布局,定位为 左 或者 右 时边距为10px
   horizontalClass() {
     // 实例左偏移还是右偏移
     return this.position.indexOf("right") > -1 ? "right" : "left";
  },
   verticalProperty() {
     // 实例上还是下
     return /^top-/.test(this.position) ? "top" : "bottom";
  },
   positionStyle() {
     // 多个实例时的偏移量
     return {
      [this.verticalProperty]: `${this.verticalOffset}px`,
    };
  },
},
 methods: {
   // 销毁当前组件
   close() {
     this.visible = false;
     this.$el.addEventListener("transitionend", this.destroyElement); // 添加事件,在过渡效果结束后再销毁组件
     this.onClose(); // 调用外面js传入组件的方法
  },
   // 销毁所有组件
   closeAll() {
     this.onCloseAll();
  },
   // 销毁组件方法
   destroyElement() {
     this.$el.removeEventListener("transitionend", this.destroyElement);
     this.$destroy(true);
  },
},
};
</script>
<style lang="less" scoped>
.DownLoadNotification {
 width: 300px;
 height: 60px;
 background-color: #dcdfe6;
 position: fixed;
 border-radius: 10px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 padding: 20px;
 .header {
   color: #606266;
   margin-bottom: 10px;
}
}
.right {
 right: 10px;
}
.left {
 left: 10px;
}
</style>

data中的自定数据的就相当于使用api传入的参数,当我们保存实例后,可以修改这个实例内的data,来达成实时更新的效果

多个实例使用案例参考

<template>
 <div id="app">
   <div class="btn">
     <el-button @click="show(1)">显示实例1</el-button>
     <el-button @click="addBtn(1)">增加进度</el-button>
   </div>
   <div class="btn">
     <el-button @click="show(2)">显示实例1</el-button>
     <el-button @click="addBtn(2)">增加进度</el-button>
   </div>
   <div class="btn">
     <el-button @click="show(3)">显示实例1</el-button>
     <el-button @click="addBtn(3)">增加进度</el-button>
   </div>
 </div>
</template>
<script>
import { notify } from "./components/DownLoadNotification/index.js";
export default {
 name: "App",
 data() {
   return {
     instance1: null,
     instance2: null,
     instance3: null,
  };
},
 methods: {
   show(index) {
     this[`instance${index}`] = notify({
       fileName: `测试文件${index}.zip`,
       fileSize: "100mb",
       downLoadProgress: 0,
       downStatus: "success",
    })
  },
   addBtn(index) {
     this[`instance${index}`].downLoadProgress += 10
  },
},
}
</script>
<style lang="less">
#app{
 display: flex;
 align-items: center;
}
.btn{
 display: flex;
 flex-direction: column;
}
</style>

本文转载于:

https://juejin.cn/post/7243725204002209852

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--封装一个通过js调用的全局vue组件的更多相关文章

  1. 自己封装一个弹窗JS

    在我们平时的开发中,一定有很多地方需要用到弹窗提示功能.而系统自带的弹窗奇丑无比,而且我们不能自主控制.因此我们在开发过程中,自己封装一个弹窗JS方便我们使用. 代码demo如下: // JavaSc ...

  2. vue学习--自定义全局vue组件

    文档目录: |--components |-loading(组件文件夹) |-loading.vue (loading组件核心) |-index.js //配置导出组件,并且install 主要配置到 ...

  3. js从$scope外部调用$scope内部函数,跨js调用非全局函数

    scope内部函数定义 //定位 $scope.LocateByPoint = function (x,y) { if(!x || !y) { window.alert("GPS坐标不存在, ...

  4. 封装一个漂亮的ant design form标签组件

    在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...

  5. 使用DWR实现JS调用服务端Java代码

    DWR简介 DWR全称Direct Web Remoting,是一款非常优秀的远程过程调用(Remote Procedure Call)框架,通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用 ...

  6. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  8. Vue.js 学习笔记之四:Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  9. Vue.js高效前端开发 • 【Vue组件】

    全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...

  10. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

随机推荐

  1. 压缩软件7-Zip的简单使用

    简介及下载地址 7-Zip是一款开源免费的压缩软件,支持windows系统及Linux系统,压缩后文件扩展名默认为.7z后缀.   网址: https://www.7-zip.org/ 截图如下: 也 ...

  2. NC13885 Music Problem

    题目链接 题目 题目描述 Listening to the music is relax, but for obsessive(强迫症), it may be unbearable. HH is an ...

  3. Ubuntu下SSH管理及SFTP下载工具Muon(Snowflake)

    简介 Muon其实更像是一个基于ssh的服务器管理工具, 界面中有PAC Manager的影子, 集成了文件管理, ssh命令行, 服务器性能监测和工具包等功能. 因为这个工具的编写语言是Java, ...

  4. 【Unity3D】基于模板测试和顶点膨胀的描边方法

    1 前言 ​ 选中物体描边特效 中介绍了基于模板纹理模糊膨胀的描边方法,该方法实现了软描边,效果较好,但是为了得到模糊纹理,对屏幕像素进行了多次渲染,效率欠佳.本文将介绍另一种描边方法:基于模板测试和 ...

  5. SVG与foreignObject元素

    SVG与foreignObject元素 可缩放矢量图形Scalable Vector Graphics - SVG基于XML标记语言,用于描述二维的矢量图形.作为一个基于文本的开放网络标准,SVG能够 ...

  6. Swoole从入门到入土(12)——HTTP服务器[Response]

    继上一节了解完请求对象之后,这一节我们着重了解响应对象(Response).响应对象主要用于将数据发现到客户端.当 Response 对象销毁时,如果未调用 end 发送 HTTP 响应,底层会自动执 ...

  7. 3分钟总览微软TPL并行编程库

    有小伙伴问我每天忽悠的TPL是什么?☹️ 这次站位高一点,严肃讲一讲. 引言 俗话说,不想开飞机的程序员不是一名好爸爸:作为微软技术栈的老鸟,一直将代码整洁之道奉为经典, 优秀的程序员将优雅.高性能的 ...

  8. git bash走代理

    git config --global http.proxy 'http://127.0.0.1:7890' git config --global https.proxy 'http://127.0 ...

  9. 学习go语言编程之标准库

    标准库包分类 Golang标准库可以大致按其中库的功能进行以下分类: 分类 对应包 描述 输入输出 bufio,fmt,io,log,flag 这个分类包括二进制以及文本格式在屏幕.键盘.文件以及其他 ...

  10. AirtestProject浅尝辄止

    AirtestProject是什么 AirtestProject是由网易游戏推出的UI自动化测试解决方案,主要包含3部分内容: 1.Airtest框架:跨平台的,基于图像识别的UI自动化测试框架,支持 ...