index.js 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import { VantComponent } from '../common/component';
  2. import { transition } from '../mixins/transition';
  3. VantComponent({
  4. classes: [
  5. 'enter-class',
  6. 'enter-active-class',
  7. 'enter-to-class',
  8. 'leave-class',
  9. 'leave-active-class',
  10. 'leave-to-class',
  11. 'close-icon-class',
  12. ],
  13. mixins: [transition(false)],
  14. props: {
  15. round: Boolean,
  16. closeable: Boolean,
  17. customStyle: String,
  18. overlayStyle: String,
  19. transition: {
  20. type: String,
  21. observer: 'observeClass',
  22. },
  23. zIndex: {
  24. type: Number,
  25. value: 100,
  26. },
  27. overlay: {
  28. type: Boolean,
  29. value: true,
  30. },
  31. closeIcon: {
  32. type: String,
  33. value: 'cross',
  34. },
  35. closeIconPosition: {
  36. type: String,
  37. value: 'top-right',
  38. },
  39. closeOnClickOverlay: {
  40. type: Boolean,
  41. value: true,
  42. },
  43. position: {
  44. type: String,
  45. value: 'center',
  46. observer: 'observeClass',
  47. },
  48. safeAreaInsetBottom: {
  49. type: Boolean,
  50. value: true,
  51. },
  52. safeAreaInsetTop: {
  53. type: Boolean,
  54. value: false,
  55. },
  56. lockScroll: {
  57. type: Boolean,
  58. value: true,
  59. },
  60. },
  61. created() {
  62. this.observeClass();
  63. },
  64. methods: {
  65. onClickCloseIcon() {
  66. this.$emit('close');
  67. },
  68. onClickOverlay() {
  69. this.$emit('click-overlay');
  70. if (this.data.closeOnClickOverlay) {
  71. this.$emit('close');
  72. }
  73. },
  74. observeClass() {
  75. const { transition, position, duration } = this.data;
  76. const updateData = {
  77. name: transition || position,
  78. };
  79. if (transition === 'none') {
  80. updateData.duration = 0;
  81. this.originDuration = duration;
  82. }
  83. else if (this.originDuration != null) {
  84. updateData.duration = this.originDuration;
  85. }
  86. this.setData(updateData);
  87. },
  88. },
  89. });