Skip to content

Commit f264e28

Browse files
xuliangzhanxuliangzhan
committedNov 29, 2024·
releases 4.3.10
·
4.4.04.3.11
1 parent e74d3fb commit f264e28

File tree

10 files changed

+67
-270
lines changed

10 files changed

+67
-270
lines changed
 

‎examples/views/date-picker/DatePickerTest.vue

+3-260
Original file line numberDiff line numberDiff line change
@@ -1,268 +1,11 @@
11
<template>
22
<div>
3-
<p>
4-
<vxe-date-picker v-model="demo1.value100" placeholder="默认尺寸"></vxe-date-picker>
5-
<vxe-date-picker v-model="demo1.value101" placeholder="中等尺寸" size="medium"></vxe-date-picker>
6-
<vxe-date-picker v-model="demo1.value102" placeholder="小型尺寸" size="small"></vxe-date-picker>
7-
<vxe-date-picker v-model="demo1.value103" placeholder="超小尺寸" size="mini"></vxe-date-picker>
8-
</p>
9-
10-
<p>
11-
<vxe-date-picker v-model="demo1.value400" placeholder="日期选择" type="date" parse-format="yyyy-dd-MM"></vxe-date-picker>
12-
<vxe-date-picker v-model="demo1.value401" placeholder="周选择" type="week" clearable></vxe-date-picker>
13-
<vxe-date-picker v-model="demo1.value402" placeholder="月选择" type="month" valueFormat="yyyy-MM-dd"></vxe-date-picker>
14-
<vxe-date-picker v-model="demo1.value403" placeholder="季选择" type="quarter" clearable></vxe-date-picker>
15-
<vxe-date-picker v-model="demo1.value404" placeholder="年选择" type="year" clearable></vxe-date-picker>
16-
<vxe-date-picker v-model="demo1.value405" placeholder="时间选择" type="time" clearable></vxe-date-picker>
17-
<vxe-date-picker v-model="demo1.value406" placeholder="日期和时间选择" type="datetime" transfer></vxe-date-picker>
18-
<vxe-date-picker v-model="demo1.value410" placeholder="yyyy-MM-dd HH:mm" type="datetime" valueFormat="yyyy-MM-dd HH:mm" transfer></vxe-date-picker>
19-
<vxe-date-picker v-model="demo1.value411" placeholder="yyyy-MM-dd HH" type="datetime" valueFormat="yyyy-MM-dd HH" transfer></vxe-date-picker>
20-
<vxe-date-picker v-model="demo1.value412" placeholder="yyyy-MM-dd" type="datetime" valueFormat="yyyy-MM-dd" transfer></vxe-date-picker>
21-
<vxe-date-picker v-model="demo1.value407" placeholder="禁用日期" type="date" :disabled-method="disabledDateMethod" transfer></vxe-date-picker>
22-
<vxe-date-picker v-model="demo1.value408" placeholder="小圆点" type="date" :festival-method="festivalNoticeMethod" transfer></vxe-date-picker>
23-
<vxe-date-picker v-model="demo1.value409" placeholder="农历节日" type="date" :festival-method="festivalCalendarMethod" transfer></vxe-date-picker>
24-
</p>
25-
26-
<p>
27-
<vxe-date-picker v-model="demo1.value800" placeholder="日期多选" type="date" multiple></vxe-date-picker>
28-
<vxe-date-picker v-model="demo1.value801" placeholder="日期多选" type="month" multiple></vxe-date-picker>
29-
<vxe-date-picker v-model="demo1.value802" placeholder="日期多选" type="quarter" multiple></vxe-date-picker>
30-
<vxe-date-picker v-model="demo1.value803" placeholder="日期多选" type="year" multiple></vxe-date-picker>
31-
<vxe-date-picker v-model="demo1.value804" placeholder="日期多选" type="week" multiple></vxe-date-picker>
32-
<vxe-date-picker v-model="demo1.value805" placeholder="日期多选" type="datetime" multiple></vxe-date-picker>
33-
</p>
34-
35-
<p>
36-
<vxe-date-picker v-model="demo1.value701" placeholder="周选择" type="week" :start-day="0" clearable></vxe-date-picker>
37-
<vxe-date-picker v-model="demo1.value702" placeholder="周选择" type="week" :start-day="1" clearable></vxe-date-picker>
38-
<vxe-date-picker v-model="demo1.value703" placeholder="周选择" type="week" :start-day="2" clearable></vxe-date-picker>
39-
<vxe-date-picker v-model="demo1.value704" placeholder="周选择" type="week" :start-day="3" clearable></vxe-date-picker>
40-
<vxe-date-picker v-model="demo1.value705" placeholder="周选择" type="week" :start-day="4" clearable></vxe-date-picker>
41-
<vxe-date-picker v-model="demo1.value706" placeholder="周选择" type="week" :start-day="5" clearable></vxe-date-picker>
42-
<vxe-date-picker v-model="demo1.value707" placeholder="周选择" type="week" :start-day="6" clearable></vxe-date-picker>
43-
</p>
44-
45-
<p>
46-
<vxe-date-picker v-model="demo1.value600" placeholder="自定义前缀图标">
47-
<template #prefix>
48-
<i class="fa fa-search my-red"></i>
49-
</template>
50-
</vxe-date-picker>
51-
<vxe-date-picker v-model="demo1.value601" placeholder="自定义后缀图标">
52-
<template #suffix>
53-
<i class="fa fa-search my-green"></i>
54-
</template>
55-
</vxe-date-picker>
56-
<vxe-date-picker v-model="demo1.value602" class="my-domain" placeholder="自定义前缀模板">
57-
<template #prefix>
58-
<span>Http://</span>
59-
</template>
60-
</vxe-date-picker>
61-
<vxe-date-picker v-model="demo1.value603" class="my-search" placeholder="自定义后缀模板">
62-
<template #suffix>
63-
<i class="fa fa-search"></i>
64-
</template>
65-
</vxe-date-picker>
66-
</p>
67-
<p>
68-
<vxe-date-picker v-model="demo1.value900" readonly></vxe-date-picker>
69-
</p>
3+
<vxe-date-picker v-model="val1" placeholder="可选日期限制" start-date="2000-01-01" end-date="2040-01-01"></vxe-date-picker>
704
</div>
715
</template>
726

737
<script lang="ts" setup>
74-
import { reactive } from 'vue'
75-
import { VxeDatePickerPropTypes, VxeInputDefines } from '../../../types'
76-
import XEUtils from 'xe-utils'
8+
import { ref } from 'vue'
779
78-
const demo1 = reactive({
79-
value100: '',
80-
value101: 1726885614375,
81-
value102: '',
82-
value103: '',
83-
value200: '',
84-
value201: '',
85-
value202: '',
86-
value203: '',
87-
value300: '',
88-
value301: '',
89-
value302: '',
90-
value303: '',
91-
value400: '',
92-
value401: '',
93-
value402: '',
94-
value403: '',
95-
value404: '',
96-
value405: '',
97-
value406: '',
98-
value407: '',
99-
value408: '2020-10-01',
100-
value409: '2020-10-01',
101-
value410: '',
102-
value411: '',
103-
value412: '',
104-
value500: '22',
105-
value501: '',
106-
value502: '',
107-
value503: '33.33',
108-
value504: '',
109-
value505: '',
110-
value506: '44',
111-
value507: '',
112-
value508: '',
113-
value509: '1e+2',
114-
value600: '',
115-
value601: '',
116-
value602: '',
117-
value603: '',
118-
value701: '2017-12-18',
119-
value702: '2017-12-18',
120-
value703: '2017-12-18',
121-
value704: '2017-12-18',
122-
value705: '2017-12-18',
123-
value706: '2017-12-18',
124-
value707: '2017-12-18',
125-
value800: '',
126-
value801: '',
127-
value802: '',
128-
value803: '',
129-
value804: '',
130-
value805: '',
131-
value900: '2017-12-18'
132-
})
133-
134-
const disabledDateMethod: VxeDatePickerPropTypes.DisabledMethod = (params) => {
135-
const { date } = params
136-
const dd = date.getDate()
137-
return dd > 15
138-
}
139-
140-
// 渲染日期小圆点
141-
const noticeMaps: Record<string, VxeInputDefines.DateFestivalInfo> = {
142-
20200910: {
143-
notice: true, // 显示小圆点事件通知
144-
important: true, // 是否标记为重要节日
145-
label: '活动'
146-
},
147-
20201015: {
148-
notice: true,
149-
important: true,
150-
label: '聚餐'
151-
},
152-
20201108: {
153-
notice: true,
154-
label: '爬山'
155-
},
156-
20201222: {
157-
notice: true,
158-
label: '游泳'
159-
}
160-
}
161-
const festivalNoticeMethod: VxeDatePickerPropTypes.FestivalMethod = (params) => {
162-
const { date, viewType } = params
163-
if (viewType === 'day') {
164-
const ymd = XEUtils.toDateString(date, 'yyyyMMdd')
165-
return noticeMaps[ymd] || { label: '无' }
166-
}
167-
}
168-
169-
// 显示日期农历节假日
170-
const calendarMaps: Record<string, VxeInputDefines.DateFestivalInfo> = {
171-
20200930: {
172-
label: '十四' // 显示节日名称
173-
},
174-
20201001: {
175-
label: '国庆节,中秋节', // 如果同一天拥有多个节日重叠，用逗号分开
176-
important: true, // 是否标记为重要节日
177-
extra: '休' // 右上角额外显示的名称
178-
},
179-
20201002: {
180-
label: '十六',
181-
extra: '休'
182-
},
183-
20201003: {
184-
label: '十七',
185-
extra: '休'
186-
},
187-
20201004: {
188-
label: '十八',
189-
extra: '休'
190-
},
191-
20201005: {
192-
label: '十九',
193-
extra: '休'
194-
},
195-
20201006: {
196-
label: '二十',
197-
extra: '休'
198-
},
199-
20201007: {
200-
label: '廿一',
201-
extra: '休'
202-
},
203-
20201008: {
204-
label: '寒霜',
205-
important: true,
206-
extra: '休'
207-
},
208-
20201009: {
209-
label: '廿三'
210-
},
211-
20201010: {
212-
label: '廿四',
213-
extra: {
214-
label: '班',
215-
important: true // 是否标记为重要节日
216-
}
217-
}
218-
}
219-
const festivalCalendarMethod: VxeDatePickerPropTypes.FestivalMethod = (params) => {
220-
const { date, viewType } = params
221-
if (viewType === 'day') {
222-
const ymd = XEUtils.toDateString(date, 'yyyyMMdd')
223-
return calendarMaps[ymd] || { label: '无' }
224-
}
225-
}
10+
const val1 = ref('')
22611
</script>
227-
228-
<style lang="scss" scoped>
229-
.my-red {
230-
color: red;
231-
}
232-
.my-green {
233-
color: green;
234-
}
235-
.my-domain.vxe-input {
236-
height: 34px;
237-
width: 300px;
238-
}
239-
.my-domain.vxe-input:deep() .vxe-input--prefix {
240-
width: 60px;
241-
height: 32px;
242-
top: 1px;
243-
text-align: center;
244-
border-right: 1px solid #dcdfe6;
245-
background-color: #f5f7fa;
246-
}
247-
.my-domain.vxe-input:deep() .vxe-input--inner {
248-
padding-left: 72px;
249-
border: 1px solid #dcdfe6;
250-
}
251-
.my-search.vxe-input {
252-
height: 34px;
253-
width: 300px;
254-
}
255-
.my-search.vxe-input:deep() .vxe-input--suffix {
256-
width: 60px;
257-
height: 32px;
258-
top: 1px;
259-
text-align: center;
260-
border-left: 1px solid #dcdfe6;
261-
background-color: #f5f7fa;
262-
cursor: pointer;
263-
}
264-
.my-search.vxe-input:deep() .vxe-input--inner {
265-
padding-right: 72px;
266-
border: 1px solid #dcdfe6;
267-
}
268-
</style>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vxe-pc-ui",
3-
"version": "4.3.9",
3+
"version": "4.3.10",
44
"description": "A vue based PC component library",
55
"scripts": {
66
"update": "npm install --legacy-peer-deps",

‎packages/date-picker/src/date-picker.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -1020,7 +1020,19 @@ export default defineComponent({
10201020
const isDateDisabled = (item: { date: Date }) => {
10211021
const { disabledMethod } = props
10221022
const { datePanelType } = reactData
1023-
return disabledMethod && disabledMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $datePicker: $xeDatePicker })
1023+
const dateStartTime = computeDateStartTime.value
1024+
const dateEndTime = computeDateEndTime.value
1025+
const { date } = item
1026+
if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
1027+
return true
1028+
}
1029+
if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
1030+
return true
1031+
}
1032+
if (disabledMethod) {
1033+
return disabledMethod({ type: datePanelType, viewType: datePanelType, date, $datePicker: $xeDatePicker })
1034+
}
1035+
return false
10241036
}
10251037

10261038
const dateSelectItem = (date: Date) => {

‎packages/form/render/index.ts

+14
Original file line numberDiff line numberDiff line change
@@ -318,12 +318,15 @@ function oldFormItemRadioAndCheckboxRender (renderOpts: any, params: any) {
318318
*/
319319
renderer.mixin({
320320
input: {
321+
formItemAutoFocus: 'input',
321322
renderFormItemContent: nativeItemRender
322323
},
323324
textarea: {
325+
formItemAutoFocus: 'textarea',
324326
renderFormItemContent: nativeItemRender
325327
},
326328
select: {
329+
formItemAutoFocus: 'input',
327330
renderFormItemContent (renderOpts: any, params: any) {
328331
return [
329332
h('select', {
@@ -336,18 +339,23 @@ renderer.mixin({
336339
}
337340
},
338341
VxeInput: {
342+
formItemAutoFocus: 'input',
339343
renderFormItemContent: defaultItemRender
340344
},
341345
VxeNumberInput: {
346+
formItemAutoFocus: 'input',
342347
renderFormItemContent: defaultItemRender
343348
},
344349
VxePasswordInput: {
350+
formItemAutoFocus: 'input',
345351
renderFormItemContent: defaultItemRender
346352
},
347353
VxeTextarea: {
354+
formItemAutoFocus: 'textarea',
348355
renderFormItemContent: defaultItemRender
349356
},
350357
VxeDatePicker: {
358+
formItemAutoFocus: 'input',
351359
renderFormItemContent: defaultItemRender
352360
},
353361
VxeButton: {
@@ -368,6 +376,7 @@ renderer.mixin({
368376
}
369377
},
370378
VxeSelect: {
379+
formItemAutoFocus: 'input',
371380
renderFormItemContent (renderOpts, params) {
372381
const { data, field } = params
373382
const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
@@ -381,6 +390,7 @@ renderer.mixin({
381390
}
382391
},
383392
VxeTreeSelect: {
393+
formItemAutoFocus: 'input',
384394
renderFormItemContent (renderOpts: any, params: any) {
385395
const { data, field } = params
386396
const { options, optionProps } = renderOpts
@@ -394,6 +404,7 @@ renderer.mixin({
394404
}
395405
},
396406
VxeTableSelect: {
407+
formItemAutoFocus: 'input',
397408
renderFormItemContent (renderOpts: any, params: any) {
398409
const { data, field } = params
399410
const { options, optionProps } = renderOpts
@@ -464,9 +475,11 @@ renderer.mixin({
464475

465476
// 以下已废弃
466477
$input: {
478+
formItemAutoFocus: 'input',
467479
renderFormItemContent: oldItemRender
468480
},
469481
$textarea: {
482+
formItemAutoFocus: 'textarea',
470483
renderFormItemContent: oldItemRender
471484
},
472485
$button: {
@@ -476,6 +489,7 @@ renderer.mixin({
476489
renderFormItemContent: oldButtonsItemRender
477490
},
478491
$select: {
492+
formItemAutoFocus: 'input',
479493
renderFormItemContent (renderOpts, params) {
480494
const { data, field } = params
481495
const { options, optionProps, optionGroups, optionGroupProps } = renderOpts

‎packages/form/src/form.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -358,8 +358,13 @@ export default defineComponent({
358358
// 如果指定了聚焦 class
359359
if (XEUtils.isFunction(autoFocus)) {
360360
inputElem = autoFocus({ $form: $xeForm, $grid: $xeGrid, item, data: props.data, field })
361-
} else if (autoFocus) {
362-
inputElem = el.querySelector(`.${item.id} ${autoFocus}`) as HTMLInputElement
361+
} else {
362+
if (autoFocus === true) {
363+
// 自动匹配模式，会自动匹配第一个可输入元素
364+
inputElem = el.querySelector(`.${item.id} input,textarea`)
365+
} else if (autoFocus) {
366+
inputElem = el.querySelector(`.${item.id} ${autoFocus}`) as HTMLInputElement
367+
}
363368
}
364369
if (inputElem) {
365370
inputElem.focus()

‎packages/input/src/input.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -1343,7 +1343,19 @@ export default defineComponent({
13431343
const isDateDisabled = (item: { date: Date }) => {
13441344
const { disabledMethod } = props
13451345
const { datePanelType } = reactData
1346-
return disabledMethod && disabledMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $input: $xeInput })
1346+
const dateStartTime = computeDateStartTime.value
1347+
const dateEndTime = computeDateEndTime.value
1348+
const { date } = item
1349+
if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
1350+
return true
1351+
}
1352+
if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
1353+
return true
1354+
}
1355+
if (disabledMethod) {
1356+
return disabledMethod({ type: datePanelType, viewType: datePanelType, date, $input: $xeInput })
1357+
}
1358+
return false
13471359
}
13481360

13491361
const dateSelectItem = (date: Date) => {

‎packages/tabs/src/tabs.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { defineComponent, ref, h, reactive, inject, PropType, provide, computed, onUnmounted, createCommentVNode, watch, nextTick, onMounted } from 'vue'
2-
import { createEvent, getConfig, getIcon, globalEvents, permission } from '../../ui'
2+
import { createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } from '../../ui'
33
import { getSlotVNs } from '../../ui/src/vn'
44
import { toCssUnit } from '../..//ui/src/dom'
55
import { isEnableConf } from '../..//ui/src/utils'
@@ -572,6 +572,7 @@ export default defineComponent({
572572
const tabOptions = computeTabOptions.value
573573
const tabStaticOptions = computeTabStaticOptions.value
574574
const defaultSlot = slots.default
575+
const footerSlot = slots.footer
575576
const tabList = defaultSlot ? tabStaticOptions : tabOptions
576577

577578
return h('div', {
@@ -592,7 +593,12 @@ export default defineComponent({
592593
renderTabHeader(tabList),
593594
h('div', {
594595
class: 'vxe-tabs-pane'
595-
}, renderTabContent(tabList))
596+
}, renderTabContent(tabList)),
597+
footerSlot
598+
? h('div', {
599+
class: 'vxe-tabs-footer'
600+
}, callSlot(footerSlot, {}))
601+
: renderEmptyElement($xeTabs)
596602
])
597603
}
598604

‎types/components/form-item.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -119,14 +119,14 @@ export namespace VxeFormItemPropTypes {
119119
* 渲染组件的内容（需要渲染器支持）
120120
*/
121121
content?: string
122-
autoFocus?: string
122+
autoFocus?: string | boolean
123123
defaultValue?: ((params: { item: VxeFormItemProps }) => any) | null | undefined | string | number | RegExp | object | any[] | Date
124124

125125
/**
126126
* 已废弃，请使用 autoFocus
127127
* @deprecated
128128
*/
129-
autofocus?: string
129+
autofocus?: string | boolean
130130
}
131131
export type Rules<D = any> = VxeFormDefines.FormRule<D>[]
132132
export type Slots = {

‎types/components/tabs.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,7 @@ export namespace VxeTabsSlotTypes {
273273
name: VxeTabsPropTypes.ModelValue
274274
}
275275
export interface ExtraSlotParams {}
276+
export interface FooterSlotParams {}
276277
}
277278

278279
export interface VxeTabsSlots {
@@ -287,6 +288,10 @@ export interface VxeTabsSlots {
287288

288289
default?: (params: VxeTabsSlotTypes.DefaultSlotParams) => any
289290
extra?: (params: VxeTabsSlotTypes.ExtraSlotParams) => any
291+
/**
292+
* 自定义页签底部模板
293+
*/
294+
footer?(params: VxeTabsSlotTypes.FooterSlotParams): any
290295
}
291296

292297
export const Tabs: typeof VxeTabs

‎types/ui/renderer.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -524,7 +524,7 @@ declare module '@vxe-ui/core' {
524524
/**
525525
* 表单项 - 设置自动聚焦元素 class
526526
*/
527-
formItemAutoFocus?: string | ((params: VxeGlobalRendererHandles.RenderFormItemAutoFocusParams) => HTMLElement | null)
527+
formItemAutoFocus?: boolean | string | ((params: VxeGlobalRendererHandles.RenderFormItemAutoFocusParams) => HTMLElement | null)
528528
/**
529529
* 表单项 - 设置表单项的 class
530530
*/

0 commit comments

Comments
 (0)
Please sign in to comment.