fusions-ui 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/components/fu-avatar/fu-avatar.vue +4 -2
  2. package/components/fu-avatar/props.js +52 -15
  3. package/components/fu-avatar-group/fu-avatar-group.vue +3 -2
  4. package/components/fu-avatar-group/props.js +31 -9
  5. package/components/fu-badge/fu-badge.vue +8 -14
  6. package/components/fu-badge/props.js +56 -16
  7. package/components/fu-banner-arc/fu-banner-arc.vue +4 -5
  8. package/components/fu-banner-arc/props.js +15 -4
  9. package/components/fu-button/fu-button.vue +18 -20
  10. package/components/fu-button/props.js +108 -35
  11. package/components/fu-cell/fu-cell.vue +9 -8
  12. package/components/fu-cell-group/fu-cell-group.vue +2 -1
  13. package/components/fu-cell-group/props.js +7 -2
  14. package/components/fu-checkbox/fu-checkbox.vue +5 -4
  15. package/components/fu-checkbox/props.js +51 -14
  16. package/components/fu-code-input/fu-code-input.vue +10 -6
  17. package/components/fu-code-input/props.js +66 -17
  18. package/components/fu-code-verify/fu-code-verify.vue +9 -5
  19. package/components/fu-code-verify/props.js +64 -17
  20. package/components/fu-collapse/fu-collapse.vue +10 -3
  21. package/components/fu-collapse/props.js +9 -3
  22. package/components/fu-collapse-item/fu-collapse-item.vue +45 -31
  23. package/components/fu-collapse-item/props.js +49 -16
  24. package/components/fu-countdown/fu-countdown.vue +2 -1
  25. package/components/fu-countdown/props.js +15 -4
  26. package/components/fu-datetime-picker/fu-datetime-picker.vue +6 -5
  27. package/components/fu-datetime-picker/props.js +91 -25
  28. package/components/fu-form/fu-form.vue +2 -1
  29. package/components/fu-form/props.js +34 -6
  30. package/components/fu-form-item/fu-form-item.vue +26 -33
  31. package/components/fu-form-item/props.js +30 -8
  32. package/components/fu-grid/fu-grid.vue +16 -17
  33. package/components/fu-grid/props.js +20 -5
  34. package/components/fu-grid-item/fu-grid-item.vue +31 -35
  35. package/components/fu-grid-item/props.js +11 -3
  36. package/components/fu-icon/fu-icon.vue +107 -0
  37. package/components/fu-icon/icon.css +584 -0
  38. package/components/{fu-icons/icons.js → fu-icon/icon.js} +1031 -1031
  39. package/components/{fu-icons/fuicons.ttf → fu-icon/icon.ttf} +0 -0
  40. package/components/fu-icon/props.js +55 -0
  41. package/components/fu-image/fu-image.vue +15 -10
  42. package/components/fu-image/props.js +69 -18
  43. package/components/fu-index-anchor/fu-index-anchor.vue +6 -5
  44. package/components/fu-index-anchor/props.js +20 -6
  45. package/components/fu-index-item/fu-index-item.vue +4 -4
  46. package/components/fu-index-list/fu-index-list.vue +9 -9
  47. package/components/fu-index-list/props.js +19 -6
  48. package/components/fu-input/fu-input.vue +54 -68
  49. package/components/fu-input/props.js +145 -53
  50. package/components/fu-keyboard/fu-keyboard.vue +19 -9
  51. package/components/fu-keyboard/keyboard-car.vue +33 -22
  52. package/components/fu-keyboard/keyboard-number.vue +17 -9
  53. package/components/fu-keyboard/props.js +66 -17
  54. package/components/fu-line/fu-line.vue +17 -13
  55. package/components/fu-line/props.js +30 -5
  56. package/components/fu-link/fu-link.vue +14 -8
  57. package/components/fu-link/props.js +22 -7
  58. package/components/fu-loading/fu-loading.vue +32 -27
  59. package/components/fu-loading/props.js +28 -8
  60. package/components/fu-loading-more/fu-loading-more.vue +19 -23
  61. package/components/fu-loading-more/props.js +27 -13
  62. package/components/fu-modal/fu-modal.vue +11 -6
  63. package/components/fu-modal/props.js +61 -17
  64. package/components/{fu-nav-bar/fu-nav-bar.vue → fu-navbar/fu-navbar.vue} +37 -44
  65. package/components/fu-notice-bar/fu-notice-bar.vue +10 -8
  66. package/components/fu-notice-bar/notice-column.vue +187 -122
  67. package/components/fu-notice-bar/notice-row.vue +85 -28
  68. package/components/fu-notice-bar/props.js +83 -22
  69. package/components/fu-number-box/fu-number-box.vue +26 -28
  70. package/components/fu-number-box/props.js +37 -11
  71. package/components/fu-parse/fu-parse.vue +0 -1
  72. package/components/fu-picker/fu-picker.vue +22 -17
  73. package/components/fu-picker/props.js +70 -19
  74. package/components/fu-popup/fu-popup.vue +38 -43
  75. package/components/fu-popup/props.js +34 -9
  76. package/components/fu-progress/fu-progress.vue +3 -2
  77. package/components/fu-progress/props.js +36 -9
  78. package/components/fu-rate/fu-rate.vue +40 -32
  79. package/components/fu-rate/props.js +47 -13
  80. package/components/fu-read-more/fu-read-more.vue +19 -14
  81. package/components/fu-read-more/props.js +68 -46
  82. package/components/fu-ribbon/fu-ribbon.vue +8 -7
  83. package/components/fu-ribbon/props.js +15 -4
  84. package/components/fu-scroll-list/fu-scroll-list.vue +18 -34
  85. package/components/fu-scroll-list/props.js +19 -10
  86. package/components/fu-search/fu-search.vue +13 -18
  87. package/components/fu-search/props.js +69 -17
  88. package/components/fu-section/fu-section.vue +19 -22
  89. package/components/fu-section/props.js +30 -4
  90. package/components/fu-sign-board/fu-sign-board.vue +18 -3
  91. package/components/fu-sign-board/props.js +15 -5
  92. package/components/fu-skeleton/fu-skeleton.vue +8 -12
  93. package/components/fu-skeleton/props.js +15 -4
  94. package/components/fu-steps/fu-steps.vue +3 -2
  95. package/components/fu-steps/props.js +23 -7
  96. package/components/fu-steps-item/fu-steps-item.vue +3 -3
  97. package/components/fu-steps-item/props.js +15 -5
  98. package/components/fu-sticky/fu-sticky.vue +3 -3
  99. package/components/fu-sticky/props.js +21 -7
  100. package/components/fu-subsection/fu-subsection.vue +29 -22
  101. package/components/fu-subsection/props.js +40 -10
  102. package/components/fu-swipe-action-item/bindingx.js +1 -1
  103. package/components/fu-swipe-action-item/fu-swipe-action-item.vue +134 -123
  104. package/components/fu-swipe-action-item/mpwxs.js +1 -1
  105. package/components/fu-swipe-action-item/props.js +22 -6
  106. package/components/fu-swiper/fu-swiper.vue +29 -27
  107. package/components/fu-swiper/props.js +81 -25
  108. package/components/fu-switch/fu-switch.vue +20 -12
  109. package/components/fu-switch/props.js +48 -13
  110. package/components/fu-tabs/fu-tabs.vue +36 -33
  111. package/components/fu-tabs/props.js +46 -13
  112. package/components/fu-tag/fu-tag.vue +24 -21
  113. package/components/fu-tag/props.js +63 -17
  114. package/components/fu-text/fu-text.vue +72 -33
  115. package/components/fu-text/props.js +85 -27
  116. package/components/fu-text/value.js +6 -6
  117. package/components/fu-textarea/fu-textarea.vue +13 -17
  118. package/components/fu-textarea/props.js +103 -30
  119. package/components/fu-timeaxis/fu-timeaxis.vue +1 -1
  120. package/components/fu-timeaxis-item/fu-timeaxis-item.vue +8 -4
  121. package/components/fu-transition/fu-transition.vue +48 -49
  122. package/components/fu-transition/props.js +21 -0
  123. package/components/fu-upload/fu-upload.vue +3 -1
  124. package/components/fu-upload/props.js +67 -19
  125. package/components/fu-upload/upload-file.vue +31 -18
  126. package/components/fu-upload/upload-image.vue +37 -19
  127. package/components/fu-vtabs/fu-vtabs.vue +6 -4
  128. package/components/fu-vtabs/props.js +50 -15
  129. package/components/fu-waterfall/fu-waterfall.vue +11 -9
  130. package/components/fu-waterfall/props.js +37 -15
  131. package/index.js +17 -24
  132. package/index.scss +9 -7
  133. package/libs/config/config.js +16 -9
  134. package/libs/function/applyEven.js +9 -9
  135. package/libs/function/check.js +81 -89
  136. package/libs/function/{index.js → common.js} +5 -5
  137. package/libs/function/message.js +0 -27
  138. package/libs/mixin/mixin.js +26 -21
  139. package/libs/{utils/min.router.config.js → route/min.route.config.js} +7 -7
  140. package/libs/{utils/router.config.js → route/route.config.js} +10 -11
  141. package/libs/{css/main.scss → style/common.scss} +50 -87
  142. package/libs/style/style.h5.scss +8 -0
  143. package/libs/style/style.mp.scss +15 -0
  144. package/package.json +1 -1
  145. package/components/fu-calendar/calendar-item.vue +0 -214
  146. package/components/fu-calendar/calendar.js +0 -546
  147. package/components/fu-calendar/fu-calendar.vue +0 -536
  148. package/components/fu-calendar/i18n/en.json +0 -12
  149. package/components/fu-calendar/i18n/index.js +0 -8
  150. package/components/fu-calendar/i18n/zh-Hans.json +0 -12
  151. package/components/fu-calendar/i18n/zh-Hant.json +0 -12
  152. package/components/fu-calendar/util.js +0 -360
  153. package/components/fu-date-picker/calendar-item.vue +0 -177
  154. package/components/fu-date-picker/calendar.vue +0 -917
  155. package/components/fu-date-picker/fu-date-picker.vue +0 -1069
  156. package/components/fu-date-picker/i18n/en.json +0 -22
  157. package/components/fu-date-picker/i18n/index.js +0 -8
  158. package/components/fu-date-picker/i18n/zh-Hans.json +0 -22
  159. package/components/fu-date-picker/i18n/zh-Hant.json +0 -22
  160. package/components/fu-date-picker/props.js +0 -68
  161. package/components/fu-date-picker/time-picker.vue +0 -924
  162. package/components/fu-date-picker/util.js +0 -419
  163. package/components/fu-icons/fu-icons.vue +0 -102
  164. package/components/fu-icons/fuicons.css +0 -585
  165. package/components/fu-landscape/fu-landscape.vue +0 -167
  166. package/components/fu-landscape/props.js +0 -64
  167. package/components/fu-tabbar/fu-tabbar.vue +0 -333
  168. package/components/fu-tabbar/props.js +0 -78
  169. package/libs/css/style.h5.scss +0 -35
  170. package/libs/css/style.mp.scss +0 -50
  171. package/libs/utils/util.js +0 -58
  172. /package/components/{fu-nav-bar → fu-navbar}/props.js +0 -0
  173. /package/components/{fu-nav-bar → fu-navbar}/status-bar.vue +0 -0
  174. /package/{components/fu-datetime-picker → libs/function}/dayjs.js +0 -0
  175. /package/libs/{css → style}/color.scss +0 -0
  176. /package/libs/{css/component.scss → style/components.scss} +0 -0
@@ -1,924 +0,0 @@
1
- <template>
2
- <view class="fu-datetime-picker">
3
- <view @click="initTimePicker">
4
- <slot>
5
- <view class="fu-datetime-picker-timebox-pointer"
6
- :class="{'fu-datetime-picker-disabled': disabled, 'fu-datetime-picker-timebox': border}">
7
- <text class="fu-datetime-picker-text">{{ time }}</text>
8
- <view v-if="!time" class="fu-datetime-picker-time">
9
- <text class="fu-datetime-picker-text">{{ selectTimeText }}</text>
10
- </view>
11
- </view>
12
- </slot>
13
- </view>
14
- <view v-if="visible" id="mask" class="fu-datetime-picker-mask" @click="tiggerTimePicker"></view>
15
- <view v-if="visible" class="fu-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
16
- :style="fixNvueBug">
17
- <view class="fu-title">
18
- <text class="fu-datetime-picker-text">{{ selectTimeText }}</text>
19
- </view>
20
- <view v-if="dateShow" class="fu-datetime-picker__container-box">
21
- <picker-view class="fu-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
22
- @change="bindDateChange">
23
- <picker-view-column>
24
- <view class="fu-datetime-picker-item" v-for="(item,index) in years" :key="index">
25
- <text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
26
- </view>
27
- </picker-view-column>
28
- <picker-view-column>
29
- <view class="fu-datetime-picker-item" v-for="(item,index) in months" :key="index">
30
- <text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
31
- </view>
32
- </picker-view-column>
33
- <picker-view-column>
34
- <view class="fu-datetime-picker-item" v-for="(item,index) in days" :key="index">
35
- <text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
36
- </view>
37
- </picker-view-column>
38
- </picker-view>
39
- <!-- 兼容 nvue 不支持伪类 -->
40
- <text class="fu-datetime-picker-sign sign-left">-</text>
41
- <text class="fu-datetime-picker-sign sign-right">-</text>
42
- </view>
43
- <view v-if="timeShow" class="fu-datetime-picker__container-box">
44
- <picker-view class="fu-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
45
- :indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
46
- <picker-view-column>
47
- <view class="fu-datetime-picker-item" v-for="(item,index) in hours" :key="index">
48
- <text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
49
- </view>
50
- </picker-view-column>
51
- <picker-view-column>
52
- <view class="fu-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
53
- <text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
54
- </view>
55
- </picker-view-column>
56
- <picker-view-column v-if="!hideSecond">
57
- <view class="fu-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
58
- <text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
59
- </view>
60
- </picker-view-column>
61
- </picker-view>
62
- <!-- 兼容 nvue 不支持伪类 -->
63
- <text class="fu-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text>
64
- <text v-if="!hideSecond" class="fu-datetime-picker-sign sign-right">:</text>
65
- </view>
66
- <view class="fu-datetime-picker-btn">
67
- <view @click="clearTime">
68
- <text class="fu-datetime-picker-btn-text">{{ clearText }}</text>
69
- </view>
70
- <view class="fu-datetime-picker-btn-group">
71
- <view class="fu-datetime-picker-cancel" @click="tiggerTimePicker">
72
- <text class="fu-datetime-picker-btn-text">{{ cancelText }}</text>
73
- </view>
74
- <view @click="setTime">
75
- <text class="fu-datetime-picker-btn-text">{{ okText }}</text>
76
- </view>
77
- </view>
78
- </view>
79
- </view>
80
- </view>
81
- </template>
82
-
83
- <script>
84
- import { initVueI18n } from '@dcloudio/uni-i18n'
85
- import i18nMessages from './i18n/index.js'
86
- const { t } = initVueI18n(i18nMessages)
87
- import { fixIosDateFormat } from './util.js'
88
- /**
89
- * FuTimePicker 时间选择器
90
- * @description 可以同时选择日期和时间的选择器
91
- * @property {String} type = [datetime|date|time] 显示模式
92
- * @property {Boolean} multiple = [true|false] 是否多选
93
- * @property {String|Number} value 默认值
94
- * @property {String|Number} start 起始日期或时间
95
- * @property {String|Number} end 起始日期或时间
96
- * @property {String} returnType = [timestamp|string]
97
- * @event {Function} change 选中发生变化触发
98
- */
99
- export default {
100
- name: 'FuTimePicker',
101
- emits: ['change', 'input', 'update:modelValue'],
102
- data() {
103
- return {
104
- indicatorStyle: `height: 50px;`,
105
- visible: false,
106
- fixNvueBug: {},
107
- dateShow: true,
108
- timeShow: true,
109
- title: '日期和时间',
110
- // 输入框当前时间
111
- time: '',
112
- // 当前的年月日时分秒
113
- year: 1920,
114
- month: 0,
115
- day: 0,
116
- hour: 0,
117
- minute: 0,
118
- second: 0,
119
- // 起始时间
120
- startYear: 1920,
121
- startMonth: 1,
122
- startDay: 1,
123
- startHour: 0,
124
- startMinute: 0,
125
- startSecond: 0,
126
- // 结束时间
127
- endYear: 2120,
128
- endMonth: 12,
129
- endDay: 31,
130
- endHour: 23,
131
- endMinute: 59,
132
- endSecond: 59,
133
- }
134
- },
135
- props: {
136
- type: {
137
- type: String,
138
- default: 'datetime'
139
- },
140
- value: {
141
- type: [String, Number],
142
- default: ''
143
- },
144
- modelValue: {
145
- type: [String, Number],
146
- default: ''
147
- },
148
- start: {
149
- type: [Number, String],
150
- default: ''
151
- },
152
- end: {
153
- type: [Number, String],
154
- default: ''
155
- },
156
- returnType: {
157
- type: String,
158
- default: 'string'
159
- },
160
- disabled: {
161
- type: [Boolean, String],
162
- default: false
163
- },
164
- border: {
165
- type: [Boolean, String],
166
- default: true
167
- },
168
- hideSecond: {
169
- type: [Boolean, String],
170
- default: false
171
- }
172
- },
173
- watch: {
174
- // #ifndef VUE3
175
- value: {
176
- handler(newVal) {
177
- if (newVal) {
178
- this.parseValue(fixIosDateFormat(newVal))
179
- this.initTime(false)
180
- } else {
181
- this.time = '';
182
- this.parseValue(Date.now())
183
- }
184
- },
185
- immediate: true
186
- },
187
- // #endif
188
- // #ifdef VUE3
189
- modelValue: {
190
- handler(newVal) {
191
- if (newVal) {
192
- this.parseValue(fixIosDateFormat(newVal))
193
- this.initTime(false)
194
- } else {
195
- this.time = '';
196
- this.parseValue(Date.now())
197
- }
198
- },
199
- immediate: true
200
- },
201
- // #endif
202
- type: {
203
- handler(newValue) {
204
- if (newValue === 'date') {
205
- this.dateShow = true;
206
- this.timeShow = false;
207
- this.title = '日期';
208
- } else if (newValue === 'time') {
209
- this.dateShow = false;
210
- this.timeShow = true;
211
- this.title = '时间';
212
- } else {
213
- this.dateShow = true;
214
- this.timeShow = true;
215
- this.title = '日期和时间';
216
- }
217
- },
218
- immediate: true
219
- },
220
- start: {
221
- handler(newVal) {
222
- this.parseDatetimeRange(fixIosDateFormat(newVal), 'start')
223
- },
224
- immediate: true
225
- },
226
- end: {
227
- handler(newVal) {
228
- this.parseDatetimeRange(fixIosDateFormat(newVal), 'end')
229
- },
230
- immediate: true
231
- },
232
-
233
- // 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项
234
- months(newVal) {
235
- this.checkValue('month', this.month, newVal)
236
- },
237
- days(newVal) {
238
- this.checkValue('day', this.day, newVal)
239
- },
240
- hours(newVal) {
241
- this.checkValue('hour', this.hour, newVal)
242
- },
243
- minutes(newVal) {
244
- this.checkValue('minute', this.minute, newVal)
245
- },
246
- seconds(newVal) {
247
- this.checkValue('second', this.second, newVal)
248
- }
249
- },
250
- computed: {
251
- // 当前年、月、日、时、分、秒选择范围
252
- years() {
253
- return this.getCurrentRange('year')
254
- },
255
-
256
- months() {
257
- return this.getCurrentRange('month')
258
- },
259
-
260
- days() {
261
- return this.getCurrentRange('day')
262
- },
263
-
264
- hours() {
265
- return this.getCurrentRange('hour')
266
- },
267
-
268
- minutes() {
269
- return this.getCurrentRange('minute')
270
- },
271
-
272
- seconds() {
273
- return this.getCurrentRange('second')
274
- },
275
-
276
- // picker 当前值数组
277
- ymd() {
278
- return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay]
279
- },
280
- hms() {
281
- return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond]
282
- },
283
-
284
- // 当前 date 是 start
285
- currentDateIsStart() {
286
- return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay
287
- },
288
-
289
- // 当前 date 是 end
290
- currentDateIsEnd() {
291
- return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay
292
- },
293
-
294
- // 当前年、月、日、时、分、秒的最小值和最大值
295
- minYear() {
296
- return this.startYear
297
- },
298
- maxYear() {
299
- return this.endYear
300
- },
301
- minMonth() {
302
- if (this.year === this.startYear) {
303
- return this.startMonth
304
- } else {
305
- return 1
306
- }
307
- },
308
- maxMonth() {
309
- if (this.year === this.endYear) {
310
- return this.endMonth
311
- } else {
312
- return 12
313
- }
314
- },
315
- minDay() {
316
- if (this.year === this.startYear && this.month === this.startMonth) {
317
- return this.startDay
318
- } else {
319
- return 1
320
- }
321
- },
322
- maxDay() {
323
- if (this.year === this.endYear && this.month === this.endMonth) {
324
- return this.endDay
325
- } else {
326
- return this.daysInMonth(this.year, this.month)
327
- }
328
- },
329
- minHour() {
330
- if (this.type === 'datetime') {
331
- if (this.currentDateIsStart) {
332
- return this.startHour
333
- } else {
334
- return 0
335
- }
336
- }
337
- if (this.type === 'time') {
338
- return this.startHour
339
- }
340
- },
341
- maxHour() {
342
- if (this.type === 'datetime') {
343
- if (this.currentDateIsEnd) {
344
- return this.endHour
345
- } else {
346
- return 23
347
- }
348
- }
349
- if (this.type === 'time') {
350
- return this.endHour
351
- }
352
- },
353
- minMinute() {
354
- if (this.type === 'datetime') {
355
- if (this.currentDateIsStart && this.hour === this.startHour) {
356
- return this.startMinute
357
- } else {
358
- return 0
359
- }
360
- }
361
- if (this.type === 'time') {
362
- if (this.hour === this.startHour) {
363
- return this.startMinute
364
- } else {
365
- return 0
366
- }
367
- }
368
- },
369
- maxMinute() {
370
- if (this.type === 'datetime') {
371
- if (this.currentDateIsEnd && this.hour === this.endHour) {
372
- return this.endMinute
373
- } else {
374
- return 59
375
- }
376
- }
377
- if (this.type === 'time') {
378
- if (this.hour === this.endHour) {
379
- return this.endMinute
380
- } else {
381
- return 59
382
- }
383
- }
384
- },
385
- minSecond() {
386
- if (this.type === 'datetime') {
387
- if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) {
388
- return this.startSecond
389
- } else {
390
- return 0
391
- }
392
- }
393
- if (this.type === 'time') {
394
- if (this.hour === this.startHour && this.minute === this.startMinute) {
395
- return this.startSecond
396
- } else {
397
- return 0
398
- }
399
- }
400
- },
401
- maxSecond() {
402
- if (this.type === 'datetime') {
403
- if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) {
404
- return this.endSecond
405
- } else {
406
- return 59
407
- }
408
- }
409
- if (this.type === 'time') {
410
- if (this.hour === this.endHour && this.minute === this.endMinute) {
411
- return this.endSecond
412
- } else {
413
- return 59
414
- }
415
- }
416
- },
417
-
418
- /**
419
- * for i18n
420
- */
421
- selectTimeText() {
422
- return t("fu-datetime-picker.selectTime")
423
- },
424
- okText() {
425
- return t("fu-datetime-picker.ok")
426
- },
427
- clearText() {
428
- return t("fu-datetime-picker.clear")
429
- },
430
- cancelText() {
431
- return t("fu-datetime-picker.cancel")
432
- }
433
- },
434
-
435
- mounted() {
436
- // #ifdef APP-NVUE
437
- const res = uni.getSystemInfoSync();
438
- this.fixNvueBug = {
439
- top: res.windowHeight / 2,
440
- left: res.windowWidth / 2
441
- };
442
- // #endif
443
- },
444
-
445
- methods: {
446
- /**
447
- * @param {Object} item
448
- * 小于 10 在前面加个 0
449
- */
450
- lessThanTen(item) {
451
- return item < 10 ? '0' + item : item
452
- },
453
-
454
- /**
455
- * 解析时分秒字符串,例如:00:00:00
456
- * @param {String} timeString
457
- */
458
- parseTimeType(timeString) {
459
- if (timeString) {
460
- let timeArr = timeString.split(':')
461
- this.hour = Number(timeArr[0])
462
- this.minute = Number(timeArr[1])
463
- this.second = Number(timeArr[2])
464
- }
465
- },
466
-
467
- /**
468
- * 解析选择器初始值,类型可以是字符串、时间戳,例如:2000-10-02、'08:30:00'、 1610695109000
469
- * @param {String | Number} datetime
470
- */
471
- initPickerValue(datetime) {
472
- let defaultValue = null;
473
- if (datetime) {
474
- defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end)
475
- } else {
476
- defaultValue = Date.now()
477
- defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end)
478
- }
479
- this.parseValue(defaultValue)
480
- },
481
-
482
- /**
483
- * 初始值规则:
484
- * - 用户设置初始值 value
485
- * - 设置了起始时间 start、终止时间 end,并 start < value < end,初始值为 value, 否则初始值为 start
486
- * - 只设置了起始时间 start,并 start < value,初始值为 value,否则初始值为 start
487
- * - 只设置了终止时间 end,并 value < end,初始值为 value,否则初始值为 end
488
- * - 无起始终止时间,则初始值为 value
489
- * - 无初始值 value,则初始值为当前本地时间 Date.now()
490
- * @param {Object} value
491
- * @param {Object} dateBase
492
- */
493
- compareValueWithStartAndEnd(value, start, end) {
494
- let winner = null;
495
- value = this.superTimeStamp(value)
496
- start = this.superTimeStamp(start)
497
- end = this.superTimeStamp(end)
498
-
499
- if (start && end) {
500
- if (value < start) {
501
- winner = new Date(start)
502
- } else if (value > end) {
503
- winner = new Date(end)
504
- } else {
505
- winner = new Date(value)
506
- }
507
- } else if (start && !end) {
508
- winner = start <= value ? new Date(value) : new Date(start)
509
- } else if (!start && end) {
510
- winner = value <= end ? new Date(value) : new Date(end)
511
- } else {
512
- winner = new Date(value)
513
- }
514
-
515
- return winner
516
- },
517
-
518
- /**
519
- * 转换为可比较的时间戳,接受日期、时分秒、时间戳
520
- * @param {Object} value
521
- */
522
- superTimeStamp(value) {
523
- let dateBase = ''
524
- if (this.type === 'time' && value && typeof value === 'string') {
525
- const now = new Date()
526
- const year = now.getFullYear()
527
- const month = now.getMonth() + 1
528
- const day = now.getDate()
529
- dateBase = year + '/' + month + '/' + day + ' ';
530
- }
531
- if (Number(value)) {
532
- value = parseInt(value)
533
- dateBase = 0;
534
- }
535
- return this.createTimeStamp(dateBase + value)
536
- },
537
-
538
- /**
539
- * 解析默认值 value,字符串、时间戳
540
- * @param {Object} defaultTime
541
- */
542
- parseValue(value) {
543
- if (!value) return
544
- if (this.type === 'time' && typeof value === "string") {
545
- this.parseTimeType(value)
546
- } else {
547
- let defaultDate = null;
548
- defaultDate = new Date(value)
549
- if (this.type !== 'time') {
550
- this.year = defaultDate.getFullYear()
551
- this.month = defaultDate.getMonth() + 1
552
- this.day = defaultDate.getDate()
553
- }
554
- if (this.type !== 'date') {
555
- this.hour = defaultDate.getHours()
556
- this.minute = defaultDate.getMinutes()
557
- this.second = defaultDate.getSeconds()
558
- }
559
- }
560
- if (this.hideSecond) {
561
- this.second = 0;
562
- }
563
- },
564
-
565
- /**
566
- * 解析可选择时间范围 start、end,年月日字符串、时间戳
567
- * @param {Object} defaultTime
568
- */
569
- parseDatetimeRange(point, pointType) {
570
- // 时间为空,则重置为初始值
571
- if (!point) {
572
- if (pointType === 'start') {
573
- this.startYear = 1920;
574
- this.startMonth = 1;
575
- this.startDay = 1;
576
- this.startHour = 0;
577
- this.startMinute = 0;
578
- this.startSecond = 0;
579
- }
580
- if (pointType === 'end') {
581
- this.endYear = 2120;
582
- this.endMonth = 12;
583
- this.endDay = 31;
584
- this.endHour = 23;
585
- this.endMinute = 59;
586
- this.endSecond = 59;
587
- }
588
- return
589
- }
590
- if (this.type === 'time') {
591
- const pointArr = point.split(':')
592
- this[pointType + 'Hour'] = Number(pointArr[0])
593
- this[pointType + 'Minute'] = Number(pointArr[1])
594
- this[pointType + 'Second'] = Number(pointArr[2])
595
- } else {
596
- if (!point) {
597
- pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60
598
- return
599
- }
600
- if (Number(point)) {
601
- point = parseInt(point)
602
- }
603
- // datetime 的 end 没有时分秒, 则不限制
604
- const hasTime = /[0-9]:[0-9]/
605
- if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test(point)) {
606
- point = point + ' 23:59:59'
607
- }
608
- const pointDate = new Date(point)
609
- this[pointType + 'Year'] = pointDate.getFullYear()
610
- this[pointType + 'Month'] = pointDate.getMonth() + 1
611
- this[pointType + 'Day'] = pointDate.getDate()
612
- if (this.type === 'datetime') {
613
- this[pointType + 'Hour'] = pointDate.getHours()
614
- this[pointType + 'Minute'] = pointDate.getMinutes()
615
- this[pointType + 'Second'] = pointDate.getSeconds()
616
- }
617
- }
618
- },
619
-
620
- // 获取 年、月、日、时、分、秒 当前可选范围
621
- getCurrentRange(value) {
622
- const range = [];
623
- for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) {
624
- range.push(i)
625
- }
626
- return range
627
- },
628
-
629
- // 字符串首字母大写
630
- capitalize(str) {
631
- return str.charAt(0).toUpperCase() + str.slice(1)
632
- },
633
-
634
- // 检查当前值是否在范围内,不在则当前值重置为可选范围第一项
635
- checkValue(name, value, values) {
636
- if (values.indexOf(value) === -1) {
637
- this[name] = values[0];
638
- }
639
- },
640
-
641
- // 每个月的实际天数
642
- daysInMonth(year, month) { // Use 1 for January, 2 for February, etc.
643
- return new Date(year, month, 0).getDate();
644
- },
645
-
646
- //兼容 iOS、safari 日期格式
647
- fixIosDateFormat(value) {
648
- if (typeof value === 'string') {
649
- value = value.replace(/-/g, '/')
650
- }
651
- return value
652
- },
653
-
654
- /**
655
- * 生成时间戳
656
- * @param {Object} time
657
- */
658
- createTimeStamp(time) {
659
- if (!time) return
660
- if (typeof time === "number") {
661
- return time
662
- } else {
663
- time = time.replace(/-/g, '/')
664
- if (this.type === 'date') {
665
- time = time + ' ' + '00:00:00';
666
- }
667
- return Date.parse(time)
668
- }
669
- },
670
-
671
- /**
672
- * 生成日期或时间的字符串
673
- */
674
- createDomSting() {
675
- const yymmdd = this.year +
676
- '-' +
677
- this.lessThanTen(this.month) +
678
- '-' +
679
- this.lessThanTen(this.day)
680
-
681
- let hhmmss = this.lessThanTen(this.hour) +
682
- ':' +
683
- this.lessThanTen(this.minute)
684
-
685
- if (!this.hideSecond) {
686
- hhmmss = hhmmss + ':' + this.lessThanTen(this.second)
687
- }
688
-
689
- if (this.type === 'date') {
690
- return yymmdd
691
- } else if (this.type === 'time') {
692
- return hhmmss
693
- } else {
694
- return yymmdd + ' ' + hhmmss
695
- }
696
- },
697
-
698
- /**
699
- * 初始化返回值,并抛出 change 事件
700
- */
701
- initTime(emit = true) {
702
- this.time = this.createDomSting()
703
- if (!emit) return
704
- if (this.returnType === 'timestamp' && this.type !== 'time') {
705
- this.$emit('change', this.createTimeStamp(this.time))
706
- this.$emit('input', this.createTimeStamp(this.time))
707
- this.$emit('update:modelValue', this.createTimeStamp(this.time))
708
- } else {
709
- this.$emit('change', this.time)
710
- this.$emit('input', this.time)
711
- this.$emit('update:modelValue', this.time)
712
- }
713
- },
714
-
715
- /**
716
- * 用户选择日期或时间更新 data
717
- * @param {Object} e
718
- */
719
- bindDateChange(e) {
720
- const val = e.detail.value;
721
- this.year = this.years[val[0]];
722
- this.month = this.months[val[1]];
723
- this.day = this.days[val[2]];
724
- },
725
-
726
- bindTimeChange(e) {
727
- const val = e.detail.value;
728
- this.hour = this.hours[val[0]];
729
- this.minute = this.minutes[val[1]];
730
- this.second = this.seconds[val[2]];
731
- },
732
-
733
- /**
734
- * 初始化弹出层
735
- */
736
- initTimePicker() {
737
- if (this.disabled) return
738
- const value = fixIosDateFormat(this.time)
739
- this.initPickerValue(value)
740
- this.visible = !this.visible;
741
- },
742
-
743
- /**
744
- * 触发或关闭弹框
745
- */
746
- tiggerTimePicker(e) {
747
- this.visible = !this.visible;
748
- },
749
-
750
- /**
751
- * 用户点击“清空”按钮,清空当前值
752
- */
753
- clearTime() {
754
- this.time = '';
755
- this.$emit('change', this.time)
756
- this.$emit('input', this.time)
757
- this.$emit('update:modelValue', this.time)
758
- this.tiggerTimePicker()
759
- },
760
-
761
- /**
762
- * 用户点击“确定”按钮
763
- */
764
- setTime() {
765
- this.initTime()
766
- this.tiggerTimePicker()
767
- }
768
- }
769
- }
770
- </script>
771
-
772
- <style lang="scss">
773
- @import '../../libs/css/component.scss';
774
- @import '../../libs/css/color.scss';
775
-
776
- .fu-datetime-picker {
777
- /* #ifndef APP-NVUE */
778
- /* width: 100%; */
779
- /* #endif */
780
- }
781
-
782
- .fu-datetime-picker-view {
783
- height: 130px;
784
- width: 270px;
785
- /* #ifndef APP-NVUE */
786
- cursor: pointer;
787
- /* #endif */
788
- }
789
-
790
- .fu-datetime-picker-item {
791
- height: 50px;
792
- line-height: 50px;
793
- text-align: center;
794
- font-size: 14px;
795
- }
796
-
797
- .fu-datetime-picker-btn {
798
- margin-top: 60px;
799
- @include flex(row);
800
- /* #ifndef APP-NVUE */
801
- cursor: pointer;
802
- /* #endif */
803
- justify-content: space-between;
804
- }
805
-
806
- .fu-datetime-picker-btn-text {
807
- font-size: 14px;
808
- color: $fu-primary;
809
- }
810
-
811
- .fu-datetime-picker-btn-group {
812
- @include flex(row);
813
- }
814
-
815
- .fu-datetime-picker-cancel {
816
- margin-right: 30px;
817
- }
818
-
819
- .fu-datetime-picker-mask {
820
- position: fixed;
821
- bottom: 0px;
822
- top: 0px;
823
- left: 0px;
824
- right: 0px;
825
- background-color: rgba(0, 0, 0, 0.4);
826
- transition-duration: 0.3s;
827
- z-index: 998;
828
- }
829
-
830
- .fu-datetime-picker-popup {
831
- border-radius: 8px;
832
- padding: 30px;
833
- width: 270px;
834
- /* #ifdef APP-NVUE */
835
- height: 500px;
836
- /* #endif */
837
- /* #ifdef APP-NVUE */
838
- width: 330px;
839
- /* #endif */
840
- background-color: #fff;
841
- position: fixed;
842
- top: 50%;
843
- left: 50%;
844
- transform: translate(-50%, -50%);
845
- transition-duration: 0.3s;
846
- z-index: 999;
847
- }
848
-
849
- .fix-nvue-height {
850
- /* #ifdef APP-NVUE */
851
- height: 330px;
852
- /* #endif */
853
- }
854
-
855
- .fu-datetime-picker-time {
856
- color: grey;
857
- }
858
-
859
- .fu-datetime-picker-column {
860
- height: 50px;
861
- }
862
-
863
- .fu-datetime-picker-timebox {
864
- border: 1px solid #E5E5E5;
865
- border-radius: 5px;
866
- padding: 7px 10px;
867
- /* #ifndef APP-NVUE */
868
- box-sizing: border-box;
869
- cursor: pointer;
870
- /* #endif */
871
- }
872
-
873
- .fu-datetime-picker-timebox-pointer {
874
- /* #ifndef APP-NVUE */
875
- cursor: pointer;
876
- /* #endif */
877
- }
878
-
879
- .fu-datetime-picker-disabled {
880
- opacity: 0.4;
881
- /* #ifdef H5 */
882
- cursor: not-allowed !important;
883
- /* #endif */
884
- }
885
-
886
- .fu-datetime-picker-text {
887
- font-size: 14px;
888
- line-height: 50px
889
- }
890
-
891
- .fu-datetime-picker-sign {
892
- position: absolute;
893
- top: 53px;
894
- /* 减掉 10px 的元素高度,兼容nvue */
895
- color: #999;
896
- /* #ifdef APP-NVUE */
897
- font-size: 16px;
898
- /* #endif */
899
- }
900
-
901
- .sign-left {
902
- left: 86px;
903
- }
904
-
905
- .sign-right {
906
- right: 86px;
907
- }
908
-
909
- .sign-center {
910
- left: 135px;
911
- }
912
-
913
- .fu-datetime-picker__container-box {
914
- position: relative;
915
- display: flex;
916
- align-items: center;
917
- justify-content: center;
918
- margin-top: 40px;
919
- }
920
-
921
- .time-hide-second {
922
- width: 180px;
923
- }
924
- </style>