diff --git a/components/_util/Portal.tsx b/components/_util/Portal.tsx index c35ab9b32..c18749339 100644 --- a/components/_util/Portal.tsx +++ b/components/_util/Portal.tsx @@ -6,7 +6,9 @@ import { onBeforeUnmount, onUpdated, Teleport, + watch, } from 'vue'; +import { useInjectPortal } from '../vc-trigger/context'; export default defineComponent({ name: 'Portal', @@ -19,13 +21,26 @@ export default defineComponent({ let isSSR = true; // getContainer 不会改变，不用响应式 let container: HTMLElement; + const { shouldRender } = useInjectPortal(); onBeforeMount(() => { isSSR = false; - container = props.getContainer(); + if (shouldRender.value) { + container = props.getContainer(); + } + }); + const stopWatch = watch(shouldRender, () => { + if (shouldRender.value && !container) { + container = props.getContainer(); + } + if (container) { + stopWatch(); + } }); onUpdated(() => { nextTick(() => { - props.didUpdate?.(props); + if (shouldRender.value) { + props.didUpdate?.(props); + } }); }); onBeforeUnmount(() => { @@ -34,6 +49,7 @@ export default defineComponent({ } }); return () => { + if (!shouldRender.value) return null; if (isSSR) { return slots.default?.(); } diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js index c186473e7..af297390b 100644 --- a/components/date-picker/__tests__/DatePicker.test.js +++ b/components/date-picker/__tests__/DatePicker.test.js @@ -4,7 +4,7 @@ import dayjs from 'dayjs'; import MockDate from 'mockdate'; import DatePicker from '..'; import focusTest from '../../../tests/shared/focusTest'; - +jest.mock('../../_util/Portal'); describe('DatePicker', () => { focusTest(DatePicker); diff --git a/components/date-picker/__tests__/QuarterPicker.test.js b/components/date-picker/__tests__/QuarterPicker.test.js index 6daa42ab7..bbf49f8d0 100644 --- a/components/date-picker/__tests__/QuarterPicker.test.js +++ b/components/date-picker/__tests__/QuarterPicker.test.js @@ -3,7 +3,7 @@ import DatePicker from '..'; import focusTest from '../../../tests/shared/focusTest'; const { QuarterPicker } = DatePicker; - +jest.mock('../../_util/Portal'); describe('QuarterPicker', () => { focusTest(QuarterPicker); fit('reset select item when popup close', async () => { diff --git a/components/date-picker/__tests__/RangePicker.test.js b/components/date-picker/__tests__/RangePicker.test.js index a24894f37..8ff8b9a52 100644 --- a/components/date-picker/__tests__/RangePicker.test.js +++ b/components/date-picker/__tests__/RangePicker.test.js @@ -64,8 +64,9 @@ describe('RangePicker', () => { }); }); - it('customize separator', () => { + fit('customize separator', async () => { const wrapper = mount(RangePicker, { props: { separator: 'test' } }); + await sleep(); expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/components/date-picker/__tests__/WeekPicker.test.js b/components/date-picker/__tests__/WeekPicker.test.js index 53d77a158..cfb23b88d 100644 --- a/components/date-picker/__tests__/WeekPicker.test.js +++ b/components/date-picker/__tests__/WeekPicker.test.js @@ -4,7 +4,7 @@ import DatePicker from '..'; import focusTest from '../../../tests/shared/focusTest'; const { WeekPicker } = DatePicker; - +jest.mock('../../_util/Portal'); describe('WeekPicker', () => { focusTest(WeekPicker); diff --git a/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index ef93ed514..629f37d25 100644 --- a/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -1,9 +1,180 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DatePicker prop locale should works 1`] = ` - -
+
+ + +
`; diff --git a/components/date-picker/__tests__/__snapshots__/QuarterPicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/QuarterPicker.test.js.snap index d4d0206ee..54d8136f6 100644 --- a/components/date-picker/__tests__/__snapshots__/QuarterPicker.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/QuarterPicker.test.js.snap @@ -5,5 +5,43 @@ exports[`QuarterPicker reset select item when popup close 1`] = `
+
+ + +
`; diff --git a/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap index edf1ae76c..497e4f176 100644 --- a/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap @@ -7,6 +7,345 @@ exports[`RangePicker customize separator 1`] = `
+
+ + +
`; diff --git a/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap index 4a4319a9d..c26c7bbed 100644 --- a/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap @@ -5,5 +5,182 @@ exports[`WeekPicker should support style prop 1`] = `
+
+ + +
`; diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap index 2094f9bc4..a68dcea9d 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap @@ -3,47 +3,47 @@ exports[`renders ./components/date-picker/demo/basic.vue correctly 1`] = `
-
+
-
+
-
+
-
+
-
+
@@ -53,91 +53,91 @@ exports[`renders ./components/date-picker/demo/basic.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/bordered.vue correctly 1`] = `
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -147,22 +147,22 @@ exports[`renders ./components/date-picker/demo/bordered.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/date-render.vue correctly 1`] = `
-
+
-
+
@@ -172,39 +172,39 @@ exports[`renders ./components/date-picker/demo/date-render.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/disabled.vue correctly 1`] = `
-
+
-
+
-
+
-
+
@@ -214,42 +214,42 @@ exports[`renders ./components/date-picker/demo/disabled.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/disabled-date.vue correctly 1`] = `
-
+
-
+
-
+
-
+
@@ -259,51 +259,51 @@ exports[`renders ./components/date-picker/demo/disabled-date.vue correctly 1`] = exports[`renders ./components/date-picker/demo/extra-footer.vue correctly 1`] = `
-
+
-
+
-
+
-
+
-
+
@@ -313,40 +313,40 @@ exports[`renders ./components/date-picker/demo/extra-footer.vue correctly 1`] = exports[`renders ./components/date-picker/demo/format.vue correctly 1`] = `
-
+
-
+
-
+
-
+
-
+
@@ -356,22 +356,22 @@ exports[`renders ./components/date-picker/demo/format.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/mode.vue correctly 1`] = `
-
+
-
+
@@ -381,24 +381,24 @@ exports[`renders ./components/date-picker/demo/mode.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/presetted-ranges.vue correctly 1`] = `
-
+
-
+
@@ -408,57 +408,57 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.vue correctly 1` exports[`renders ./components/date-picker/demo/range-picker.vue correctly 1`] = `
-
+
-
+
-
+
-
+
-
+
@@ -472,6 +472,7 @@ exports[`renders ./components/date-picker/demo/select-in-range.vue correctly 1`]
+
`; @@ -482,40 +483,40 @@ exports[`renders ./components/date-picker/demo/size.vue correctly 1`] = `
-
+
-
+
-
+
-
+
@@ -525,20 +526,20 @@ exports[`renders ./components/date-picker/demo/size.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/start-end.vue correctly 1`] = `
-
+
-
+
@@ -548,78 +549,78 @@ exports[`renders ./components/date-picker/demo/start-end.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/suffix.vue correctly 1`] = `
-
+
-
+
-
+
-
+
-
ab
+
-
ab
+
-
ab +
-
ab
+
@@ -640,11 +641,11 @@ exports[`renders ./components/date-picker/demo/switchable.vue correctly 1`] = `
-
+
@@ -654,22 +655,22 @@ exports[`renders ./components/date-picker/demo/switchable.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/text.vue correctly 1`] = `
-
+
-
+
@@ -679,22 +680,22 @@ exports[`renders ./components/date-picker/demo/text.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/time.vue correctly 1`] = `
-
+
-
+
diff --git a/components/date-picker/__tests__/__snapshots__/other.test.js.snap b/components/date-picker/__tests__/__snapshots__/other.test.js.snap index 71d2c55ed..34ab71c97 100644 --- a/components/date-picker/__tests__/__snapshots__/other.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/other.test.js.snap @@ -1,7 +1,827 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MonthPicker and WeekPicker render MonthPicker 1`] = ` -
+exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `""`; + +exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `""`; + +exports[`Picker format by locale date 1`] = ` +
+
+
+ + +
+
+`; + +exports[`Picker format by locale dateTime 1`] = ` +
+
+
+ + +
+
+`; + +exports[`Picker format by locale month 1`] = ` +
+