index.js 1.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { VantComponent } from '../common/component';
  2. import { transition } from '../mixins/transition';
  3. import { safeArea } from '../mixins/safe-area';
  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), safeArea()],
  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. const updateData = {
  52. name: transition || position
  53. };
  54. if (transition === 'none') {
  55. updateData.duration = 0;
  56. }
  57. this.set(updateData);
  58. }
  59. }
  60. });