123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import { VantComponent } from '../common/component';
  2. import { transition } from '../mixins/transition';
  3. import { iphonex } from '../mixins/iphonex';
  4. VantComponent({
  5. classes: [
  6. 'enter-class',
  7. 'enter-active-class',
  8. 'enter-to-class',
  9. 'leave-class',
  10. 'leave-active-class',
  11. 'leave-to-class'
  12. ],
  13. mixins: [transition(false), iphonex],
  14. props: {
  15. transition: {
  16. type: String,
  17. observer: 'observeClass'
  18. },
  19. customStyle: String,
  20. overlayStyle: String,
  21. zIndex: {
  22. type: Number,
  23. value: 100
  24. },
  25. overlay: {
  26. type: Boolean,
  27. value: true
  28. },
  29. closeOnClickOverlay: {
  30. type: Boolean,
  31. value: true
  32. },
  33. position: {
  34. type: String,
  35. value: 'center',
  36. observer: 'observeClass'
  37. }
  38. },
  39. created() {
  40. this.observeClass();
  41. },
  42. methods: {
  43. onClickOverlay() {
  44. this.$emit('click-overlay');
  45. if (this.data.closeOnClickOverlay) {
  46. this.$emit('close');
  47. }
  48. },
  49. observeClass() {
  50. const { transition, position } = this.data;
  51. this.updateClasses(transition || position);
  52. }
  53. }
  54. });