<head></head>
<body>
<!-- dialog -->
<button onclick=dakai()></button>
<dialog id='dialog'>this is a dialog</dialog>
<script>
var dakai=function(){
var x=document.getElementById("dialog").open
console.log(x)
if(x){
document.getElementById("dialog").removeAttribute('open')
}else{
document.getElementById("dialog").setAttribute('open','open')
}
</script>
</body>
</html>
除了基本的alert、comfirm、prompt以外 我们还横向扩展了选项组的actions,以及自定义填充图片或者内容的dialog。
满足了基本需求外,我们还纵向扩展了点击弹窗时的异步载入能力,使其满足需要点击后加载数据,加载完成才能关闭弹窗的场景。
对于prompt,我们还提供了轻量可扩展的文本域校验以及错误提示。
由于该组件面向小型项目以及非工程化的项目,我们提供了umd打包的版本以及window打包的版本,以满足所有零碎项目的需求。
面向开发者,我们提供了完善的类型推导文件(d.ts)。使其在开发过程中拥有能够更好的体验。由于是基于Typescript开发的,我们的组件对Typescript项目拥有完全的亲和力。
除了支持基础的alert、confirm、prompt外 还扩展了
此外 支持html模板渲染,自定义prompt文本域检查等功能 满足绝大部分弹窗场景
对于非工程化项目
VueDialogX支持script标签引入
对于工程化项目,VueDialogX提供umd方式引入
VueDialogX 提供两种挂载方式
一种使用Vue.use的方式挂载
也可以引入VueDialogX来自行初始化实例
你肯定会有一个按钮点击事件Onclick()之类的,点击可以弹出dialog,还会有一个div加载需要dialog的需要的数据等。
$("#divId").dialog({
里面类似easyui的dialog
})
3.点击事件在js添加一个$("#divId").dialog("open")
即可,希望可以帮助到你,望采纳!