2-7原生模态框

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <Dialog v-show="isShow" @Del="handleDel"></Dialog>
    <button @click="toggle">切换</button>
  </div>
</template>
<script>
import Dialog from '@/components/Dialog.vue'
export default {
  data(){
    return{
      isShow:false
    }
  },
   components:{
    Dialog
  },
  methods:{
    toggle(){
      this.isShow=true
    },
    handleDel(){
      this.isShow = false
    }
  }
}
</script>

<template>
  <div class="container">
      <p class="font-1">只爱西经</p>
      <p>任西关情劫千千重，千观色相偏看重，镜不染尘凡心动</p>
      <button @click="handleDel">取消</button>
  </div>
</template>
<script>
export default {
    name:"Dialog",
    methods:{
        handleDel(){
            this.$emit("Del")
        }
    }
}
</script>
<style scoped>
.font-1{
    font-size: 20px;
}
.container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.4);
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
</style>