contract/src/components/popOutBox.vue

<template>
  <div v-if="showBox">
    <div @click="handleClick" class="mask">
    </div>
    <div class="box-container">
      <h1 class="title">
        <slot name="title"></slot>
      </h1>
      <div class="action-container">
        <button class="action-button">
          <slot name="action1"></slot>
        </button>
        <button class="action-button">
          <slot name="action2"></slot>
        </button>
      </div>

    </div>
  </div>

</template>

<script>
    export default {
        name: "popOutBox",
      props:['value'],
      data(){
          return{
            showBox:false
          }
      },
      methods:{
        handleClick(){
          this.showBox=false;
          this.$emit('input',false)
        }
      },
      watch:{
          value(val){
            this.showBox=!!val;
          }
      }
    }
</script>

<style scoped>
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 999;
  }
  .box-container{
    position: absolute;
    width: 8.3rem;
    height: 4.2rem;
    border-radius: 0.1rem;
    background-color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1000;
  }
  .title{
    margin-top: 1rem;
    font-size: 0.4rem;
    color: #1491e2;
  }
  .action-button{
    width: 3.8rem;
    height: 1.1rem;
    background-color: #60c0ff;
    border-radius: 0.6rem;
    color:#fff;
    border: none;
    margin-left: 0.15rem;
    margin-top: 0.9rem;
    font-size: 0.4rem;
  }
</style>