js实现点击一个按钮打开或关闭dialog对话框

JavaScript013

js实现点击一个按钮打开或关闭dialog对话框,第1张

<html>

<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>

vuetify提供了<v-dialog v-model="show">对话框组件，一个很有意思的事情是，通过在父组件设置show，就可以控制对话框的弹出和关闭。

这里给出了一个模拟实现，通过父组件按钮，控制子组件的显示和关闭。

“弹窗展示”就相当于对话框，也就相当于<v-dialog>组件。通过点击切换可以修改父组件的show变量，该变量传递给了子组件，注意不是通过v-bind的方式，而是v-model。子组件获得该变量，就可以用于显示、关闭的判断。