diff --git a/src/popover/demos/enUS/slots.demo.vue b/src/popover/demos/enUS/slots.demo.vue index 7525cd6be..c006882cc 100644 --- a/src/popover/demos/enUS/slots.demo.vue +++ b/src/popover/demos/enUS/slots.demo.vue @@ -16,9 +16,7 @@ Use `header` or `footer` slot to customize header or footer. Content. diff --git a/src/popover/demos/zhCN/slots.demo.vue b/src/popover/demos/zhCN/slots.demo.vue index 63d2e8abf..f254a22dd 100644 --- a/src/popover/demos/zhCN/slots.demo.vue +++ b/src/popover/demos/zhCN/slots.demo.vue @@ -16,9 +16,7 @@ 内容 diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx index fc9fb2c8e..c069111b9 100644 --- a/src/popover/src/PopoverBody.tsx +++ b/src/popover/src/PopoverBody.tsx @@ -278,12 +278,10 @@ export default defineComponent({ if (!renderBody) { const { value: extraClass } = NPopover.extraClassRef const { internalTrapFocus } = props + const hasHeaderOrFooter = + !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer) const renderContentInnerNode = (): VNodeChild[] => { - const hasContent = - !isSlotEmpty(slots.header) || - !isSlotEmpty(slots.footer) || - !isSlotEmpty(slots.default) - const body = hasContent ? ( + const body = hasHeaderOrFooter ? ( <> {resolveWrappedSlot(slots.header, (children) => { return children ? ( @@ -329,9 +327,11 @@ export default defineComponent({ const maybeScrollableBody = props.scrollable ? ( {{ default: () => body @@ -348,8 +348,6 @@ export default defineComponent({ : null return [maybeScrollableBody, arrow] } - const hasHeaderOrFooter = - !isSlotEmpty(slots.header) || !isSlotEmpty(slots.footer) contentNode = h( 'div', mergeProps( diff --git a/src/popover/src/styles/index.cssr.ts b/src/popover/src/styles/index.cssr.ts index f4d5c66b3..9eb15508d 100644 --- a/src/popover/src/styles/index.cssr.ts +++ b/src/popover/src/styles/index.cssr.ts @@ -115,55 +115,55 @@ export default c([ `) ]), placementStyle('top-start', ` - top: calc(${arrowSize} / -2 + 1px); + top: calc(${arrowSize} / -2); left: calc(${getArrowOffset('top-start')} - var(--v-offset-left)); `), placementStyle('top', ` - top: calc(${arrowSize} / -2 + 1px); + top: calc(${arrowSize} / -2); transform: translateX(calc(${arrowSize} / -2)) rotate(45deg); left: 50%; `), placementStyle('top-end', ` - top: calc(${arrowSize} / -2 + 1px); + top: calc(${arrowSize} / -2); right: calc(${getArrowOffset('top-end')} + var(--v-offset-left)); `), placementStyle('bottom-start', ` - bottom: calc(${arrowSize} / -2 + 1px); + bottom: calc(${arrowSize} / -2); left: calc(${getArrowOffset('bottom-start')} - var(--v-offset-left)); `), placementStyle('bottom', ` - bottom: calc(${arrowSize} / -2 + 1px); + bottom: calc(${arrowSize} / -2); transform: translateX(calc(${arrowSize} / -2)) rotate(45deg); left: 50%; `), placementStyle('bottom-end', ` - bottom: calc(${arrowSize} / -2 + 1px); + bottom: calc(${arrowSize} / -2); right: calc(${getArrowOffset('bottom-end')} + var(--v-offset-left)); `), placementStyle('left-start', ` - left: calc(${arrowSize} / -2 + 1px); + left: calc(${arrowSize} / -2); top: calc(${getArrowOffset('left-start')} - var(--v-offset-top)); `), placementStyle('left', ` - left: calc(${arrowSize} / -2 + 1px); + left: calc(${arrowSize} / -2); transform: translateY(calc(${arrowSize} / -2)) rotate(45deg); top: 50%; `), placementStyle('left-end', ` - left: calc(${arrowSize} / -2 + 1px); + left: calc(${arrowSize} / -2); bottom: calc(${getArrowOffset('left-end')} + var(--v-offset-top)); `), placementStyle('right-start', ` - right: calc(${arrowSize} / -2 + 1px); + right: calc(${arrowSize} / -2); top: calc(${getArrowOffset('right-start')} - var(--v-offset-top)); `), placementStyle('right', ` - right: calc(${arrowSize} / -2 + 1px); + right: calc(${arrowSize} / -2); transform: translateY(calc(${arrowSize} / -2)) rotate(45deg); top: 50%; `), placementStyle('right-end', ` - right: calc(${arrowSize} / -2 + 1px); + right: calc(${arrowSize} / -2); bottom: calc(${getArrowOffset('right-end')} + var(--v-offset-top)); `), ...map( @@ -231,7 +231,7 @@ function placementStyle ( left: 0; top: 0; bottom: 0; - ${position}: calc(100% - 1px); + ${position}: 100%; ${oppositePlacement[position]}: auto; ${sizeStyle} `, [