用h()给渲染的组件传递参数

项目的一个下载悬浮提示框是使用antv的notification组件结合自定义的进度条实现的。

效果:

由于进度条需要完整显示,所以取消了组件自带的自动关闭效果。

查看官方文档,可以通过notification.close(key)来关闭提示框窗口。其中key是notification的唯一值。

我们需要实现的效果是,下载完毕后延迟3s后关闭提示框(即进度条达到100之后)

项目中进度条的实现是通过Vue3的 h()函数将进度条组件Downloading和自定义进度条函数process渲染在notification中的。

而我们只能在Downloading组件中去监听进度条的进度,而关闭提示框又需要调用notification.close(key),所以我采取的方案是,渲染进度条时,将当前提示框的key传递给Downloading组件,当Downloading组件监听到进度为100时,调用notification.close(key)。

但一开始,将传参的名字设置为key传递给Downloading组件,我发现子组件无法正确接收到key的值。查询vue3的h()文档后我发现是因为在 Vue 3 中,使用 h 函数传递属性时,由于key 是一个保留属性,不会作为普通的 prop 传递给组件。要解决这个问题,可以使用其他名称来传递 key,例如 notificationKey。

所以我将传递的参数名改成了notificationKey即可实现。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-16 21:14:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-16 21:14:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-16 21:14:02       87 阅读
  4. Python语言-面向对象

    2024-06-16 21:14:02       96 阅读

热门阅读

  1. 一步一步写线程之十五协程

    2024-06-16 21:14:02       29 阅读
  2. 【Flask 系统教程 7】数据库使用 SQLAlchemy

    2024-06-16 21:14:02       25 阅读
  3. Dubbo源码解析-mock原理

    2024-06-16 21:14:02       30 阅读
  4. MYSQL in和exists

    2024-06-16 21:14:02       31 阅读
  5. C语言结构体学生

    2024-06-16 21:14:02       28 阅读
  6. c语言连接两个字符串

    2024-06-16 21:14:02       25 阅读