记录--封装一个通过js调用的全局vue组件

这篇具有很好参考价值的文章主要介绍了记录--封装一个通过js调用的全局vue组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

记录--封装一个通过js调用的全局vue组件

前言

在使用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>

记录--封装一个通过js调用的全局vue组件

本文转载于:

https://juejin.cn/post/7243725204002209852

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

 记录--封装一个通过js调用的全局vue组件文章来源地址https://www.toymoban.com/news/detail-487677.html

到了这里,关于记录--封装一个通过js调用的全局vue组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例)

    1.封装一个js文件 msgSdk.js 注意:需要修改这个请求地址  apiServiceAddress 2.在index.html中引入 msgSdk.js文件 和 jquery文件 3.在页面中调用

    2024年04月27日
    浏览(38)
  • 整体认识和路由配置、基础数据渲染、热榜区域实现、图片预览组件封装、认识SKU组件、通用组件统一注册全局(详情页)【Vue3】

    整体业务认识 路由配置 准备组件模板 配置路由 绑定模板测试跳转 封装接口 获取数据渲染模版 思考:渲染模版时遇到对象的多层属性访问可能出现什么问题? 模块实现整体分析 结论:两块热榜相比, 结构一致,标题title和列表内容不同 渲染基础热榜数据 1- 准备模版 2- 封

    2024年02月15日
    浏览(45)
  • vue 封装一个Dialog组件

    基于element-plus封装一个Dialog组件

    2024年02月09日
    浏览(34)
  • 记录--9个封装Vue组件的小技巧

    组件是前端框架的基本构建块。把它们设计得更好会使我们的应用程序更容易改变和理解。在这节课中,分享一下在过去几年中工作中学到的 9 个技巧。 在创建一个组件之前,看看它是为了可重用性和为某些UI添加一个状态,还是仅仅为了组织和划分代码。 如果是后者,那么

    2024年02月04日
    浏览(47)
  • vue~封装一个文本框标签组件

    父组件向子组件的传值 类型检查和默认值:您可以为props指定类型检查和默认值。这可以确保传递给子组件的数据符合期望的类型,以及在没有传递数据时具有合理的默认值。例如: 在上述示例中,message 的默认值是字符串 \\\'Default Message\\\',count 的默认值是数字 0。 :dic是子组件

    2024年02月08日
    浏览(39)
  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(42)
  • Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库,如何发布到npm并使用(支持全局或按需引入使用),超详细

    以下我以 wocwin-admin-vue2 项目为例 修改目录结构,最终如下 1、导入组件,组件必须声明 name 2、定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 3、导出的对象必须具有 install,才能被 Vue.use() 方法安装(全局使用) 4、按需引入 5、packa

    2024年02月08日
    浏览(79)
  • vue中父组件直接调用子组件方法(通过ref)

    目录 1、vue2 中,父组件调用子组件的方法 2、vue3 中,父组件调用子组件的方法 在Vue 2中,父组件可以通过使用 ref 属性来引用子组件的实例,然后通过该实例调用子组件的方法。 首先,在父组件的模板中,给子组件添加一个 ref 属性: 然后,在父组件的JavaScript代码中,可以

    2024年04月27日
    浏览(36)
  • vue~封装一个文本框添加与删除的组件

    这是一个div,包含了两个文本框,后面是添加和删除按钮 添加按钮复制出新的div,除了文本框没有内容,其它都上面一样 删除按钮将当前行div删除 提交之后,将出现当前你添加的这个列表的对象,对接后端接口,将这个数组POST到后端即可,如图所示:

    2024年02月08日
    浏览(34)
  • 在vue中,一个组件怎么调用另一个组件中的data数据

    在 Vue 中,组件之间的数据通信可以通过 props 和 events 来实现,但是要访问另一个组件中的 data 数据,可以使用 ref。 使用 ref,可以给组件指定一个唯一的名字,然后通过 this.$refs.[ref name] 来访问该组件的所有属性和方法,包括 data 数据。 例如: 在上面的代码中,我们将子组

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包