github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: popover support empty slot

pull/5361/head
tangjinzhou 2022-03-17 14:02:07 +08:00
parent 85197c4b50
commit 71e110036e
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/popover/index.tsx
View File

@ -3,7 +3,7 @@ import { computed, defineComponent, ref } from 'vue';
import Tooltip from '../tooltip'; import Tooltip from '../tooltip';
import abstractTooltipProps from '../tooltip/abstractTooltipProps'; import abstractTooltipProps from '../tooltip/abstractTooltipProps';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { initDefaultProps } from '../_util/props-util'; import { filterEmpty, initDefaultProps } from '../_util/props-util';
import { withInstall } from '../_util/type'; import { withInstall } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import omit from '../_util/omit'; import omit from '../_util/omit';
@ -39,10 +39,14 @@ const Popover = defineComponent({
const { prefixCls, configProvider } = useConfigInject('popover', props); const { prefixCls, configProvider } = useConfigInject('popover', props);
const rootPrefixCls = computed(() => configProvider.getPrefixCls()); const rootPrefixCls = computed(() => configProvider.getPrefixCls());
const getOverlay = () => { const getOverlay = () => {
const { title = slots.title?.(), content = slots.content?.() } = props; const { title = filterEmpty(slots.title?.()), content = filterEmpty(slots.content?.()) } =
props;
const hasTitle = !!(Array.isArray(title) ? title.length : title);
const hasContent = !!(Array.isArray(content) ? content.length : title);
if (!hasTitle && !hasContent) return undefined;
return ( return (
<> <>
{title && <div class={`${prefixCls.value}-title`}>{title}</div>} {hasTitle && <div class={`${prefixCls.value}-title`}>{title}</div>}
<div class={`${prefixCls.value}-inner-content`}>{content}</div> <div class={`${prefixCls.value}-inner-content`}>{content}</div>
</> </>
); );