评分

elementUI的弹出层dialog中.sync的使用

6个月前更新

一、elementUI的弹出层dialog中.sync的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
       <div id="app">
            <input type="button" value="添加信息" @click="dialogVisible=true">
            <el-dialog title="提示" 
                      :visible="dialogVisible" 
                      @update:visible="dialogVisible=false"></el-dialog>
                 <!--相当于上面简写 -->
            <!-- <el-dialog title="提示"  :visible.sync="dialogVisible"></el-dialog> -->
       </div>
       <script src="../js//vue.js"></script>
       <script>
         new Vue({
              el:"#app",
              data:{
                dialogVisible:false
              },
              methods:{
                updateVal(){
                    console.log(this.dialogVisible);
                },
                setDialogValue1(){
                   this.dialogVisible=!this.dialogVisible;
                }
              },
              components:{
                'el-dialog':{
                     props:['title','visible'],
                     template:`<div v-show='visible'>
                                   <button @click='setDialogVisible'>X</button>
                                   <h1>{{title}}</h1>
                                   <slot></slot>
                               </div>`,
                     methods:{
                          setDialogVisible(){
                             this.$emit('update:visible',false);
                          }
                     }
                }
              }
         })
       </script>
</body>
</html>