快应用底部弹窗

快应用底部弹窗

<template>
  <div class="test">
      <div class="maskBox" @click="close"></div>
      <div class="model translateYByEntry">
          <slot></slot>
      </div>
  </div>
</template>
<style lang="less">
   @keyframes translateYByEntry {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-700px);
    }
  }
   @keyframes translateYByLeave {
    from {
      transform: translateY(-700px);
    }
    to {
      transform: translateY(0);
    }
  }
  .translateYByEntry {
    animation-name: translateYByEntry;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
  }
  .translateYByLeave {
    animation-name: translateYByLeave;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
  }
  .test {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
    padding-bottom: 700px;
    .model {
      width:100%;
      height: 700px;
      position: fixed;
      left: 0;
      bottom: -700px;
      border-top-left-radius:40px;
      border-top-right-radius:40px;
      background-color:#ffffff;
      z-index: 10;
      padding-top: 50px;
      display: flex;
      flex-direction: column;
    }
  }
  .maskBox{
    width: 100%;
    height: 100%;
  }
  


</style>
<script>

//   import share from "@service.share";
//   import prompt from "@system.prompt";
//   import account from '@service.account'
  export default {
    props: ['propShow'],

    data: {
      translateY: '',
    },
    onInit() { 
    },
    clickEntry () {
      this.translateY = 'translateYByEntry'
      // require('./index')
    },
    clickLeave () {
      this.translateY = 'translateYByLeave'
    },
    close(){
        this.$emit('close', false)
    }
  }
</script>

<import name="bottom-box" src="../components/bottomBox"></import>
<bottom-box if="{{showContent}}" @close="closeBox">
//写底部弹窗的内容
 </bottom-box>

//关闭底部弹窗
    closeBox() {
      this.showContent = false
    },