preliminary/src/components/DetailBox.vue

<template>
  <div class="detailBox-wrap" ref="detailBox">
    <div class="head">
      <span class="icon" @click="close">
        <img src="../images/small-close.png">
      </span>
      <span class="name">{{privateData.name+'详情'}}</span>
      <span @click="handleClear">清空</span>
    </div>
    <div class="main">
      <Detail :datas="privateData" 
              ref="detail"
              :type="moduleType" 
              :ppId="ppId"/>
    </div>
    <div class="foot" @click="complete">完成</div>
    <Toast :message="clearTxt" 
          :show="showToast"
          @comfirn="comfirnDel" 
          @cancel="cancelDel"/>
  </div>
</template>
<script type="text/javascript">
  import Detail from './Detail.vue';
  import Toast from '../common/Toast.vue';
  export default {
    name:'DetailBox', //点开详情的盒子
    data(){
      return{
        msg:"胸痛详情",
        privateData:{},
        compFlag:false,
        clearTxt:"是否清空当前已选内容？",
        showToast:false
      }
    },
    created(){
      this.privateData = this.data;
    },
    mounted(){
      const box = this.$refs.detailBox;
      const height = document.documentElement.clientHeight;
      box.style.height = height - 45 + 'px'; 
    },
    methods:{
      close(){
        this.$emit("close");
      },
      complete(){
        this.$refs.detail.saveData();
        this.$emit("pComplete");
      },
      handleClear(){//清空
        this.showToast = true;
      },
      cancelDel(){
        this.showToast = false;
      },
      comfirnDel(){
        this.$refs.detail.clearData();
        this.showToast = false;
        // 让detail组件更新
        // this.privateData = JSON.parse(JSON.stringify(this.data));
        this.$emit('reload',this.data.id);
      }
    },
    props:['data','moduleType','ppId'],
    components:{
      Detail,
      Toast
    }
  }
</script>
<style lang="less" scoped>
@import '../less/base.less';
  .detailBox-wrap{
    width: 100%;
    // overflow-y: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 666;
    background: #fff;
    border-radius: .08rem .08rem 0 0;
    font-size: .3rem;
    // animation: wave .4s ease-in;
    animation: wave .4s linear;
    .head{
      height: .88rem;
      line-height: .88rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #E6E7EF;
      padding: 0 .4rem 0 .32rem;
      font-size: .28rem;
      color: #7C828E;
      .icon{
        display: inline-block;
        height: 100%;
        padding: 0 .1rem;
        img{
          width:.34rem;
          vertical-align: middle;
        }
      }
      .name{
        font-size: .32rem;
        color: #1A1A1A;
      }
    }
    .main{
      height: 100%;
      width:100%;
      overflow-y: auto;
    }
    .foot{
      .footer;
      animation-delay:.6s;
      animation: foo .4s linear;
      /* width:100%;
      height: .88rem;
      line-height: .88rem;
      text-align: center;
      color:#fff;
      font-size: .32rem;
      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF); */
    }
  }
  @keyframes wave {
    0%   {top:100% ;}
    25% {top: 75%;}
    50% {top: 50%;}
    75% {top: 25%;}
    100% {top: 45px;}
  } 
  @keyframes foo {
    0% {bottom:-1rem;}
    100% {bottom:0;}
  }
</style>