index.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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. ],
  12. mixins: [transition(false)],
  13. props: {
  14. round: Boolean,
  15. closeable: Boolean,
  16. customStyle: String,
  17. overlayStyle: String,
  18. transition: {
  19. type: String,
  20. observer: 'observeClass'
  21. },
  22. zIndex: {
  23. type: Number,
  24. value: 100
  25. },
  26. overlay: {
  27. type: Boolean,
  28. value: true
  29. },
  30. closeIcon: {
  31. type: String,
  32. value: 'cross'
  33. },
  34. closeIconPosition: {
  35. type: String,
  36. value: 'top-right'
  37. },
  38. closeOnClickOverlay: {
  39. type: Boolean,
  40. value: true
  41. },
  42. position: {
  43. type: String,
  44. value: 'center',
  45. observer: 'observeClass'
  46. },
  47. safeAreaInsetBottom: {
  48. type: Boolean,
  49. value: true
  50. },
  51. safeAreaInsetTop: {
  52. type: Boolean,
  53. value: false
  54. }
  55. },
  56. created() {
  57. this.observeClass();
  58. },
  59. methods: {
  60. onClickCloseIcon() {
  61. this.$emit('close');
  62. },
  63. onClickOverlay() {
  64. this.$emit('click-overlay');
  65. if (this.data.closeOnClickOverlay) {
  66. this.$emit('close');
  67. }
  68. },
  69. observeClass() {
  70. const { transition, position } = this.data;
  71. const updateData = {
  72. name: transition || position
  73. };
  74. if (transition === 'none') {
  75. updateData.duration = 0;
  76. }
  77. this.setData(updateData);
  78. }
  79. }
  80. });