Vue 自定义 弹出层组件

// An highlighted block
<template>
  <div class="bg" v-if="value" @click="clickOnThe">
    <div class="point">
      <div class="pop" id="animation"></div>
      //内容区
    </div>
  </div>
</template>
<style scoped>
.bg {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
}
.point {
  position: absolute;
  left: 50%;
  top: 50%;
}
.pop {
  width: 500px;
  height: 500px;
  position: absolute;
  left: -250px;
  top: -250px;

  background: #fff;
}
//左右摆动动画
#animation {
  -webkit-animation: wobble 1s 0.2s ease both;
  -moz-animation: wobble 1s 0.2s ease both;
}
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes wobble {
  0% {
    -moz-transform: translateX(0%);
  }
  15% {
    -moz-transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -moz-transform: translateX(20%) rotate(3deg);
  }
  45% {
    -moz-transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -moz-transform: translateX(10%) rotate(2deg);
  }
  75% {
    -moz-transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -moz-transform: translateX(0%);
  }
}
//向下淡出 动画
/* #animation {
  -webkit-animation: fadeInDown 1s 0.2s ease both;
  -moz-animation: fadeInDown 1s 0.2s ease both;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
} */
</style>
<script >
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },

  data () {
    return {}
  },
  mounted () {
    console.log(this.value)
  },
  methods: {
    clickOnThe () {
      this.$emit('input', !this.value)
    },
  }
}
</script>