vue实现dialog对话框

刺骨的言语ヽ痛彻心扉 2022-05-26 13:39 203阅读 0赞

一、为实现该dialog的复用，我这里把它写成一个组件（Vue中定义的组件）

<template>
      <div id="dialog">
        <div class="border">
          <div @click="closeDialog" class="closeImg"></div>
          <span class="message">这是一段信息</span>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: "",
        data(){
          return {}
        },
        methods:{
          closeDialog(){
             //给父组件传参
             this.$emit('closeDialog',false)
          }
        }
      }
    </script>
    
    <style scoped>
      #dialog{
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3);
        width: 100%;
        height: 100%;
      }
      .message{
        text-align: center;
        position: absolute;
        top: 50%;
      }
      .closeImg{
        width: 20px;
        height: 20px;
        float: right;
        margin-right: 5px;
        margin-top: 5px;
        cursor: pointer;
        background-image: url(../../assets/close.png);
        background-size: cover;
        background-repeat: no-repeat;
      }
      .border{
        text-align: center;
        background-color: white;
        border-radius: 20px;
        width: 50%;
        height: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    </style>

二、注册并使用该组件

<template>
      <div id="exam">
        <div style="cursor: pointer;" @click="vm.showDialog=true">
          点我打开Dialog
        </div>
        //@closeDialog用来接收子组件传过来的参数
         <Dialog
          @closeDialog="close"
          v-if="vm.showDialog"></Dialog>
      </div>
    </template>
    
    <script>
      import Vue from 'vue'
      import Dialog from '../../public/Dialog'
      Vue.component('Dialog',Dialog)
        export default {
          name: "",
          data(){
              return {
                vm: {
                  showDialog: false,
                }
              }
          },
          methods:{
            close(){
              this.vm.showDialog = false;
            }
          }
        }
    </script>
    
    <style scoped>
      #exam{
        width: 100%;
        height: 100%;
      }
    </style>

附张效果图：

![70][]

![70 1][]

以上便实现了dialog对话框，子组件可以暴露很多属性出来，在父组件中进行配置，这里我只是暴露一个关闭方法，其他的类同。

[70]: /images/20220526/9e70c82a30da40ddb74be677c73943e7.png
[70 1]: /images/20220526/dd9b9119a9dc4f20a4854ea402d1eb87.png