Vue3使用jsx和render函数动态插入组件和元素

定义弹框组件(只实现功能,不管样式)

import {render} from 'vue'
export function SingPop(content,handler) {const div = document.createElement('div');let pop = <div><div>{content}</div><div><button onClick={()=>{document.body.removeChild(div);console.log('不同意');handler.cancel && handler.cancel()}}>不同意</button><button onClick={()=>{document.body.removeChild(div);console.log('同意');handler.agree && handler.agree();}}>同意</button></div></div>/*** render —— 渲染虚拟 DOM* @param 参数1 要被渲染的虚拟 DOM,必选* @param 参数2 要渲染的位置,必选* @description 虚拟 DOM 创建完成后,需要使用 render 函数,才能在页面中渲染
**/render(pop,div);document.body.appendChild(div);
} 

// 使用

	import {SingPop} from './singPop.jsx'// 可通过一个按钮来触发SingPop('哈哈哈',{cancel:()=>{console.log('cancel');},agree:()=>{console.log('agree')}})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/709619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI场景文件系统全景对比分析

针对AI场景下的文件系统&#xff0c;我们可以考虑几种常见的解决方案&#xff0c;如传统的网络附属存储&#xff08;NAS&#xff09;、高性能并行文件系统&#xff08;如Lustre和IBM Spectrum Scale&#xff09;&#xff0c;以及Hammerspace的Hyperscale NAS。下面是对这几种文…

NXP实战笔记(十一):32K3xx基于RTD-SDK在S32DS上配置DFLASH、MemAcc、Fee

目录 1、概述 2、RTD-SDK配置之Cache_Ip 3、RTD-SDK配置之Mem_43_InFls 4、RTD-SDK配置之MemAcc 5、RTD-SDK配置之Fee 6、代码示例 1、概述 S32K3目前安装的RTD普遍使用的是R22-11版本的AUTOSAR规范&#xff0c;作为一直使用AUTOSAR4.2.2的程序员来讲&#xff0c;属实迭代…

东方博宜 1511. 数字之和为13的整数

东方博宜 1511. 数字之和为13的整数 #include<iostream> using namespace std; int main() {int n ;cin >> n ;int cnt 0 ;for(int i 1 ; i < n ; i){int sum 0 ;int y ;y i ;while(true){sum y%10;y y / 10 ;if(y0)break; }if(sum 13)cnt 1 ; }cout…

leetcode-70. 爬楼梯

题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示…

QT之QSharedMemory共享内存

QSharedMemory是qt提供对共享内存操作的类&#xff0c;主要用来对内存卡写数据和读数据。 常用api: 1、void QSharedMemory::setKey(const QString &key) 为共享内存设置键值。如何当前的内存共享对象已经链接到底层的共享内存段&#xff08;isAttached&#xff09;&…

脚手架工程使用ElementUI

在终端中执行以下指令 npm install --save element-ui 在终端中显示added 9 packages in 10s 说明安装完成 在工程的main.js中 导入并使用ElementUI: import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI) 可以在*.vue页面中…

91、在推理流程中加载动态库中的Infer函数

注:建议在 new_version_with_notes 目录下尝试本节内容,有更为丰富的细节输出。 在上一节将生成的代码编译成一个动态链接库之后,接下来需要加载动态链接库中写好的推理入口函数,完成推理。 在生成的代码中,在 codegen 目录下,有一个 codegen.cc 文件,里面是一个 Infe…

二、TensorFlow结构分析(2)

目录 1、会话 1.1 __init__(target,graphNone,configNone) 1.2 会话的run() 1.3 feed操作 TF数据流图图与TensorBoard会话张量变量OP高级API 1、会话 1.1 __init__(target,graphNone,configNone) def session_demo():# 会话的演示# Tensorflow实现加法运算a_t tf.constan…

Appium + mitmProxy 实现APP接口稳定性测试

随着 App 用户量的不断增长&#xff0c;任何小的问题都可能放大成严重的线上事故&#xff0c;为了避免对App造成损害的任何可能性&#xff0c;我们必须从各个方面去思考 App 的稳定性建设&#xff0c;尽可能减少任何潜在的威胁。 1.背景介绍 为了保障 App 的稳定性&#xff0…

【Docker】前端基于dockerfiel构建镜像部署,实现在容器启动时传递环境变量, 请求不同服务地址

前端部署采用 docker 的方式&#xff0c; 实现在容器启动时传递环境变量&#xff0c; 请求不同服务地址 实现思路&#xff1a; 定义.env.xxx 文件&#xff08;环境变量赋值&#xff09;&#xff0c;在compose.yml中引入.env.xxx 文件&#xff0c;环境变量通过nginx的sub_filte…

算法基础(三)(模拟)

1.模拟算法介绍&#xff1a; 模拟算法通过模拟实际情况来解决问题&#xff0c;一般容易理解但是实现起来比较复杂&#xff0c;有很多需要注意的细节&#xff0c;或者是一些所谓很“麻烦”的东西。模拟题一般不涉及太难的算法&#xff0c;一般就是由较多的简单但是不好处理的部…

redis启动错误

错误&#xff1a; Creating Server TCP listening socket 127.0.0.1:6379: bind: No error redis-server.exe redis.windows.conf redis-cli.exe shutdown auth "yourpassword"

深基杨辉三角

题目描述 给出 n(n≤20)&#xff0c;输出杨辉三角的前 n 行。 如果你不知道什么是杨辉三角&#xff0c;可以观察样例找找规律。 输入格式 无 输出格式 无 输入输出样例 输入 #1 6 输出 #1 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 解 #include<iostream&g…

深基蛇形方阵

题目描述 给出一个不大于 9 的正整数 n&#xff0c;输出 nn 的蛇形方阵。 从左上角填上 1 开始&#xff0c;顺时针方向依次填入数字&#xff0c;如同样例所示。注意每个数字有都会占用 3 个字符&#xff0c;前面使用空格补齐。 输入格式 输入一个正整数 nn&#xff0c;含义…

9 easy 28. 找出字符串中第一个匹配项的下标

暴力法&#xff1a; //给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。 //如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 // // // // 示例 1&…

TypeScript04:其他常用类型

一、联合类型 联合类型&#xff1a;多种类型任选其一&#xff0c;配合类型保护进行判断。 类型保护&#xff1a;当对某个变量进行类型判断之后&#xff0c;在判断的语句块中便可以确定它的 确切类型&#xff0c; typeof 可以触发基本类型的类型保护。 let name:string | und…

harbor配置目录被误删后救援

我司微服务产品的业务镜像&#xff0c;在客户现场上云安全检测中发现需要打补丁&#xff1b;放在角落、时不常用一次的harbor镜像仓库需要用到了&#xff1a;将加固后的基础镜像上传以备份&#xff0c;方便其他同学拉取使用。 然鹅&#xff0c;启动后harbor-db频繁重启 harbo…

c# string.Empty与“ “

背景&#xff1a; 在项目中加了几行代码&#xff0c;结果程序就莫名奇妙崩掉了。初步判断是有个 仔细分析了一下&#xff0c;添加的代码&#xff0c;用到 string.Empty来清空原来string变量中的值。然后就仔细研究了一下 string.Empty 和 “” 之间的区别 Empty是string类中的…

最新 CLion 2023.3.4 下载与安装 + 永久免费

文章目录 Stage 1 : 官网下载Stage 2 : 下载工具Stage 3-1 : windows为例Stage 3-2 : mac为例常见问题部分小伙伴 Mac 系统执行脚本遇到如下错误&#xff1a;解决方法&#xff1a; 执行脚本做了啥&#xff1f;和正版区别&#xff1f; Stage 1 : 官网下载 先去官网下载 我这里下…

python对接阿里云2.0SDK对接短信发送代码例子

由于官方推荐使用2.0 所以咱们与时俱进 代码部分 from alibabacloud_dysmsapi20170525.client import Client as Dysmsapi20170525Client from alibabacloud_tea_openapi import models as open_api_models from alibabacloud_dysmsapi20170525 import models as dysmsapi_20…