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

fix: cascader auto adjust overflow, close #5482

pull/5485/head
tangjinzhou 2022-04-12 14:24:27 +08:00
parent 6d2bcf0ab8
commit d5270e9a9d
1 changed files with 5 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/vc-select/SelectTrigger.tsx
View File

@ -6,7 +6,9 @@ import { computed, ref, defineComponent } from 'vue';
import type { VueNode } from '../_util/type'; import type { VueNode } from '../_util/type';
import type { DropdownRender, Placement, RenderDOMFunc } from './BaseSelect'; import type { DropdownRender, Placement, RenderDOMFunc } from './BaseSelect';
const getBuiltInPlacements = (adjustX: number) => { const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
// Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
return { return {
bottomLeft: { bottomLeft: {
points: ['tl', 'bl'], points: ['tl', 'bl'],
@ -43,14 +45,6 @@ const getBuiltInPlacements = (adjustX: number) => {
}; };
}; };
const getAdjustX = (
adjustXDependencies: Pick<SelectTriggerProps, 'autoAdjustOverflow' | 'dropdownMatchSelectWidth'>,
) => {
const { autoAdjustOverflow, dropdownMatchSelectWidth } = adjustXDependencies;
if (!!autoAdjustOverflow) return 1;
// Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
return typeof dropdownMatchSelectWidth !== 'number' ? 0 : 1;
};
export interface RefTriggerProps { export interface RefTriggerProps {
getPopupElement: () => HTMLDivElement; getPopupElement: () => HTMLDivElement;
} }
@ -72,7 +66,6 @@ export interface SelectTriggerProps {
getPopupContainer?: RenderDOMFunc; getPopupContainer?: RenderDOMFunc;
dropdownAlign: object; dropdownAlign: object;
empty: boolean; empty: boolean;
autoAdjustOverflow?: boolean;
getTriggerDOMNode: () => any; getTriggerDOMNode: () => any;
onPopupVisibleChange?: (visible: boolean) => void; onPopupVisibleChange?: (visible: boolean) => void;
@ -90,7 +83,6 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
dropdownStyle: PropTypes.object, dropdownStyle: PropTypes.object,
placement: String, placement: String,
empty: { type: Boolean, default: undefined }, empty: { type: Boolean, default: undefined },
autoAdjustOverflow: { type: Boolean, default: undefined },
prefixCls: String, prefixCls: String,
popupClassName: String, popupClassName: String,
animation: String, animation: String,
@ -107,13 +99,8 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
} as any, } as any,
setup(props, { slots, attrs, expose }) { setup(props, { slots, attrs, expose }) {
const builtInPlacements = computed(() => { const builtInPlacements = computed(() => {
const { autoAdjustOverflow, dropdownMatchSelectWidth } = props; const { dropdownMatchSelectWidth } = props;
return getBuiltInPlacements( return getBuiltInPlacements(dropdownMatchSelectWidth);
getAdjustX({
autoAdjustOverflow,
dropdownMatchSelectWidth,
}),
);
}); });
const popupRef = ref(); const popupRef = ref();
expose({ expose({