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

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

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>

 

模态窗口组件的代码：

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