Vue3使用jsx和render函数动态插入组件和元素
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
定义弹框组件(只实现功能,不管样式)
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')
}
})
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献14条内容
所有评论(0)