props.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import { defineProps } from '../../libs/util/props';
  2. import theme from '../../libs/config/theme.js';
  3. export default defineProps('datetimePicker', {
  4. // 是否打开组件
  5. show: {
  6. type: Boolean,
  7. default: false,
  8. },
  9. // 是否展示顶部的操作栏
  10. showToolbar: {
  11. type: Boolean,
  12. default: true,
  13. },
  14. // 绑定值
  15. // #ifdef VUE2
  16. value: {
  17. type: [String, Number],
  18. default: '',
  19. },
  20. // #endif
  21. // #ifdef VUE3
  22. modelValue: {
  23. type: [String, Number],
  24. default: '',
  25. },
  26. // #endif
  27. // 顶部标题
  28. title: {
  29. type: String,
  30. default: '',
  31. },
  32. // 展示格式,mode=date为日期选择,mode=time为时间选择,mode=year-month为年月选择,mode=datetime为日期时间选择
  33. mode: {
  34. type: String,
  35. default: 'datetime',
  36. },
  37. // 可选的最大时间
  38. maxDate: {
  39. type: Number,
  40. // 最大默认值为后10年
  41. default: new Date(new Date().getFullYear() + 10, 0, 1).getTime(),
  42. },
  43. // 可选的最小时间
  44. minDate: {
  45. type: Number,
  46. // 最小默认值为前10年
  47. default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
  48. },
  49. // 可选的最小小时,仅mode=time有效
  50. minHour: {
  51. type: Number,
  52. default: 0,
  53. },
  54. // 可选的最大小时,仅mode=time有效
  55. maxHour: {
  56. type: Number,
  57. default: 23,
  58. },
  59. // 可选的最小分钟,仅mode=time有效
  60. minMinute: {
  61. type: Number,
  62. default: 0,
  63. },
  64. // 可选的最大分钟,仅mode=time有效
  65. maxMinute: {
  66. type: Number,
  67. default: 59,
  68. },
  69. // 选项过滤函数
  70. filter: {
  71. type: [Function, null],
  72. default: null,
  73. },
  74. // 选项格式化函数
  75. formatter: {
  76. type: [Function, null],
  77. default: null,
  78. },
  79. // 是否显示加载中状态
  80. loading: {
  81. type: Boolean,
  82. default: false,
  83. },
  84. // 各列中,单个选项的高度
  85. itemHeight: {
  86. type: [String, Number],
  87. default: 44,
  88. },
  89. // 取消按钮的文字
  90. cancelText: {
  91. type: String,
  92. default: () => uni.$u.$t('uDatetimePicker.cancelText'),
  93. },
  94. // 确认按钮的文字
  95. confirmText: {
  96. type: String,
  97. default: () => uni.$u.$t('uDatetimePicker.confirmText'),
  98. },
  99. // 取消按钮的颜色
  100. cancelColor: {
  101. type: String,
  102. default: theme.tipsColor,
  103. },
  104. // 确认按钮的颜色
  105. confirmColor: {
  106. type: String,
  107. default: theme.primary,
  108. },
  109. // 每列中可见选项的数量
  110. visibleItemCount: {
  111. type: [String, Number],
  112. default: 5,
  113. },
  114. // 是否允许点击遮罩关闭选择器
  115. closeOnClickOverlay: {
  116. type: Boolean,
  117. default: true,
  118. },
  119. // 各列的默认索引
  120. defaultIndex: {
  121. type: Array,
  122. default: () => [],
  123. },
  124. immediateChange: {
  125. type: Boolean,
  126. default: false,
  127. },
  128. round: {
  129. type: [String, Number],
  130. default: '',
  131. },
  132. format: {
  133. type: String,
  134. default: '',
  135. },
  136. valueFormat: {
  137. type: String,
  138. default: '',
  139. },
  140. showInput: {
  141. type: Boolean,
  142. default: false,
  143. },
  144. inputProps: {
  145. type: Object,
  146. default: () => ({
  147. placeholder: '请选择日期时间',
  148. disabled: true,
  149. backgroundColor: 'transparent',
  150. disabledColor: '#f5f7fa',
  151. placeholderClass: 'input-placeholder',
  152. placeholderStyle: 'color: #c0c4cc',
  153. confirmType: 'done',
  154. focus: false,
  155. inputAlign: 'left',
  156. fontSize: '15px',
  157. color: theme.contentColor,
  158. prefixIcon: '',
  159. prefixIconStyle: '',
  160. suffixIcon: '',
  161. suffixIconStyle: '',
  162. border: 'surround',
  163. shape: 'square',
  164. round: '4px',
  165. borderColor: '',
  166. })
  167. },
  168. });