index.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. },
  57. created() {
  58. this.observeClass();
  59. },
  60. methods: {
  61. onClickCloseIcon() {
  62. this.$emit('close');
  63. },
  64. onClickOverlay() {
  65. this.$emit('click-overlay');
  66. if (this.data.closeOnClickOverlay) {
  67. this.$emit('close');
  68. }
  69. },
  70. observeClass() {
  71. const { transition, position, duration } = this.data;
  72. const updateData = {
  73. name: transition || position,
  74. };
  75. if (transition === 'none') {
  76. updateData.duration = 0;
  77. this.originDuration = duration;
  78. } else if (this.originDuration != null) {
  79. updateData.duration = this.originDuration;
  80. }
  81. this.setData(updateData);
  82. },
  83. },
  84. });