vue系列_自定义组件Modal（模态窗口）

谁借莪１个温暖的怀抱￠ 2021-11-19 15:42 1471阅读 0赞

父组件的代码（打开模态窗口的代码）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

<template>
      <div class="hello">
        <button @click="toggleModal">打开Modal对话框</button>
        <Modal v-show="showModal" v-on:closeme="closeme"></Modal>
      </div>
    </template>
    
    <script>
    import Modal from './Modal';
    export default {
      name: 'HelloWorld',
      data () {
        return {
          showModal:false
        }
      },
      components:{
        Modal
      },
      methods:{
        toggleModal:function(){
          this.showModal = !this.showModal;
        },
        closeme:function(){
          this.showModal = !this.showModal;
        }
      }
    }
    </script>
    
    
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

模态窗口组件的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1][]

<template>
      <div class="modal-backdrop">
         <div class="modal" :style="mainStyles">
            <div class="modal-header">
              <h3>我是一个Modal的标题</h3>
            </div>
            <div class="modal-body">
                <p>我是一个Modal的内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-close" @click="closeSelf">关闭</button>
                <button type="button" class="btn-confirm" @click="confirm">确认</button>
            </div>
        </div>
    
      </div>
    </template>
    
    <style>
    .modal-backdrop { 
        position: fixed; 
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0; 
        background-color: rgba(0,0,0,.3); 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    .modal { 
        background-color: #fff; 
        box-shadow: 2px 2px 20px 1px; 
        overflow-x:auto; 
        display: flex; 
        flex-direction: column;
        border-radius: 16px;
        width: 700px;
    } 
    .modal-header { 
        border-bottom: 1px solid #eee; 
        color: #313131; 
        justify-content: space-between;
        padding: 15px; 
        display: flex; 
    } 
    .modal-footer { 
        border-top: 1px solid #eee; 
        justify-content: flex-end;
        padding: 15px; 
        display: flex; 
    } 
    .modal-body { 
        position: relative; 
        padding: 20px 10px; 
    }
    .btn-close, .btn-confirm {    
        border-radius: 8px;
        margin-left:16px;
        width:56px;
        height: 36px;
        border:none;
        cursor: pointer;
    }
    .btn-close {
        color: #313131;
        background-color:transparent;
    }
    .btn-confirm {
        color: #fff; 
        background-color: #2d8cf0;
    }
    
    
    </style>
    
    <script>
    export default {
      name: 'Modal',
      props: {  
    
      },
      data() {
        return {       
        }
      }, 
      methods: {    
        closeSelf() {
            this.$emit("closeme");      
        }
      }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: /images/20211119/16b734e153a14703bb66e68fcf99f1d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1]: /images/20211119/726af603ec5f4cad9e59513701b287f4.png