index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view>
  3. <van-transition
  4. :show="show"
  5. custom-class="van-overlay"
  6. :custom-style="'z-index: ' + zIndex + '; ' + customStyle"
  7. :duration="duration"
  8. @tap.native="onClick"
  9. @touchmove.native.stop.prevent="noop"
  10. >
  11. <slot></slot>
  12. </van-transition>
  13. </view>
  14. </template>
  15. <script>
  16. import { VantComponent } from '../common/component';
  17. export default {
  18. data() {
  19. return {};
  20. },
  21. props: {
  22. show: Boolean,
  23. customStyle: String,
  24. duration: {
  25. type: null,
  26. default: 300
  27. },
  28. zIndex: {
  29. type: Number,
  30. default: 1
  31. }
  32. },
  33. methods: {
  34. onClick() {
  35. this.$emit('click');
  36. },
  37. // for prevent touchmove
  38. noop() {}
  39. }
  40. };
  41. </script>
  42. <style>
  43. @import '../common/index.ttss';
  44. .van-overlay {
  45. position: fixed;
  46. top: 0;
  47. left: 0;
  48. width: 100%;
  49. height: 100%;
  50. background-color: rgba(0, 0, 0, 0.7);
  51. background-color: var(--overlay-background-color, rgba(0, 0, 0, 0.7));
  52. }
  53. </style>