props.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import { defineProps } from '../../libs/util/props';
  2. export default defineProps('popup', {
  3. // 是否展示弹窗
  4. show: {
  5. type: Boolean,
  6. default: false
  7. },
  8. // 弹窗标题
  9. title: {
  10. type: String,
  11. default: ''
  12. },
  13. // 弹窗标题样式
  14. titleStyle: {
  15. type: [Object, String],
  16. default: () => ({})
  17. },
  18. // 是否显示遮罩
  19. overlay: {
  20. type: Boolean,
  21. default: true
  22. },
  23. // 弹出的方向,可选值为 top bottom right left center
  24. mode: {
  25. type: String,
  26. default: 'bottom'
  27. },
  28. // 动画时长,单位ms
  29. duration: {
  30. type: [String, Number],
  31. default: 300
  32. },
  33. // 是否显示关闭图标
  34. closeable: {
  35. type: Boolean,
  36. default: false
  37. },
  38. // 自定义遮罩的样式
  39. overlayStyle: {
  40. type: [Object, String],
  41. default: ''
  42. },
  43. // 点击遮罩是否关闭弹窗
  44. closeOnClickOverlay: {
  45. type: Boolean,
  46. default: true
  47. },
  48. // 层级
  49. zIndex: {
  50. type: [String, Number],
  51. default: 888
  52. },
  53. // 是否为iPhoneX留出底部安全距离
  54. safeAreaInsetBottom: {
  55. type: Boolean,
  56. default: true
  57. },
  58. // 是否留出顶部安全距离(状态栏高度)
  59. safeAreaInsetTop: {
  60. type: Boolean,
  61. default: false
  62. },
  63. // 自定义关闭图标
  64. closeIcon: {
  65. type: String,
  66. default: 'close'
  67. },
  68. // 自定义关闭图标颜色
  69. closeIconColor: {
  70. type: String,
  71. default: '#909399'
  72. },
  73. // 自定义关闭图标大小
  74. closeIconSize: {
  75. type: [String, Number],
  76. default: 18
  77. },
  78. // 自定义关闭图标位置,top-left为左上角,top-right为右上角,bottom-left为左下角,bottom-right为右下角
  79. closeIconPos: {
  80. type: String,
  81. default: 'top-right'
  82. },
  83. // 是否显示圆角
  84. round: {
  85. type: [Boolean, String, Number],
  86. default: 0
  87. },
  88. // mode=center,也即中部弹出时,是否使用缩放模式
  89. zoom: {
  90. type: Boolean,
  91. default: true
  92. },
  93. // 弹窗背景色,设置为transparent可去除白色背景
  94. bgColor: {
  95. type: String,
  96. default: ''
  97. },
  98. // 遮罩的透明度,0-1之间
  99. overlayOpacity: {
  100. type: [Number, String],
  101. default: 0.5
  102. },
  103. // 弹窗的margin值,单位px
  104. margin: {
  105. type: [String, Number],
  106. default: 0
  107. },
  108. // 弹窗的width值,单位px
  109. width: {
  110. type: [String, Number],
  111. default: ''
  112. },
  113. // 弹窗的height值,单位px
  114. height: {
  115. type: [String, Number],
  116. default: ''
  117. }
  118. })