vue2.X 自定义 模态框 modal

1.自定义 modal

Modal.vue

<!-- 模态框 -->
<template>
  <div class="modal-mask" v-show="value" transition="modal">
    <div class="modal-wrapper">
      <div class="modal-container">
        <!-- 头部 -->
        <div class="modal-header">
          <slot name="header"></slot>
        </div>
        <!-- 内容部分 -->
        <div class="modal-body">
          <span>起床</span><mt-switch></mt-switch>
        </div>

        <div class="modal-body">
          <span>吃饭</span><mt-switch></mt-switch>
        </div>

        <div class="modal-body">
          <span>集合</span><mt-switch></mt-switch>
        </div>

        <div class="modal-body">
          <span>加工车间</span><mt-switch></mt-switch>
        </div>
        <!-- 底部 -->
        <div class="modal-footer">
          <mt-button type="danger" @click="cancel">取消</mt-button> <mt-button type="primary" @click="confirm">确定</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      value: false
    }
  },
  mounted(){
      this.value = this.show;
  },
  // 监听show数值的变化
  watch:{
    show:{
      handler:function(val,oldval){
        this.value = val;
      }
    }
  },
  methods:{
    cancel(){
      this.value = false;
      // 向父组件传值
      this.$emit('listenToChildEvent',this.value);
    },
    confirm(){
      this.value = false;
      // 向父组件传值
      this.$emit('listenToChildEvent',this.value);
    }
  }
}
</script>

<style lang="less" scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
   70%;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
  border-bottom: 1px solid #ddd;
  span{
    display: inline-block;
    height: 40px;
    line-height: 40px;
     60%;
    vertical-align: middle;
  }
  label{
     30%;
    display: inline-block;
    vertical-align: middle;
  }
}

.modal-footer{
  text-align: center;
}

.modal-default-button {
  float: right;
}

.modal-enter, .modal-leave {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

解释：

（1）通过 watch 监听 子组件的数据变化

（2）通过 $emit 子组件 向 父组件 传值

2.父组件 调用

father.vue

<template>
  <div>
    <button @click="showType"></button>
    <!-- 模态框 -->
    <m-modal :show="showModal" v-on:listenToChildEvent="setModal">
      <h3 slot="header">类型选择</h3>
    </m-modal>
  </div>
</template>

<script>
// 引入 模态框组件
import mModal from '../../components/Modal'

export default {
  components: {
    mModal
  },
  data(){
    return{
      // 默认值
      showModal:false
    }
  },
  methods: {
    // 点击按钮
    showType(){
      this.showModal = true;
    },
    // 接收子组件的传值,并更改父组件的数据
    setModal(data){
      this.showModal = data;
    }
  }
}
</script>

<style lang="less" scoped>

</style>

解释：

（1）通过  :show="showModal"  父组件 向 子组件 传值

（2）通过  v-on:listenToChildEvent="setModal"  父组件 接收 子组件 的值

3.效果图