popup.vue 743 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div class="mask" @click.stop="onClose" :class="{'hide':value==false,'show':value==true}">
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props:{
  9. value:{
  10. type:Boolean,
  11. default: false
  12. }
  13. },
  14. methods:{
  15. onClose(){
  16. //this.$emit("input",!this.value);
  17. }
  18. }
  19. }
  20. </script>
  21. <style lang="scss" scoped>
  22. .mask{
  23. position: fixed;
  24. top: 0;
  25. left: 0;
  26. right: 0;
  27. bottom: 0;
  28. z-index: 8999;
  29. background-color: #000;
  30. opacity: 0.5;
  31. }
  32. .hide {
  33. display: none;
  34. }
  35. .show{
  36. display: block;
  37. }
  38. </style>