chore(Popup): adjust shared props (#8224)

This commit is contained in:
neverland 2021-02-26 10:33:55 +08:00 committed by GitHub
parent cb6276451e
commit 87b6654900
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 59 additions and 50 deletions

View File

@ -5,8 +5,9 @@ import { createNamespace, pick } from '../utils';
// Components // Components
import Icon from '../icon'; import Icon from '../icon';
import Popup, { popupSharedProps } from '../popup'; import Popup from '../popup';
import Loading from '../loading'; import Loading from '../loading';
import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
const [createComponent, bem] = createNamespace('action-sheet'); const [createComponent, bem] = createNamespace('action-sheet');
@ -50,10 +51,6 @@ export default createComponent({
emits: ['select', 'cancel', 'update:show'], emits: ['select', 'cancel', 'update:show'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const popupPropKeys = Object.keys(popupSharedProps) as Array<
keyof typeof popupSharedProps
>;
const onUpdateShow = (show: boolean) => { const onUpdateShow = (show: boolean) => {
emit('update:show', show); emit('update:show', show);
}; };
@ -161,7 +158,7 @@ export default createComponent({
position="bottom" position="bottom"
safeAreaInsetBottom={props.safeAreaInsetBottom} safeAreaInsetBottom={props.safeAreaInsetBottom}
{...{ {...{
...pick(props, popupPropKeys), ...pick(props, popupSharedPropKeys),
'onUpdate:show': onUpdateShow, 'onUpdate:show': onUpdateShow,
}} }}
> >

View File

@ -6,10 +6,11 @@ import { createNamespace, addUnit, pick, UnknownProp } from '../utils';
import { BORDER_TOP, BORDER_LEFT } from '../utils/constant'; import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
// Components // Components
import Popup, { popupSharedProps } from '../popup'; import Popup from '../popup';
import Button from '../button'; import Button from '../button';
import ActionBar from '../action-bar'; import ActionBar from '../action-bar';
import ActionBarButton from '../action-bar-button'; import ActionBarButton from '../action-bar-button';
import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
const [createComponent, bem, t] = createNamespace('dialog'); const [createComponent, bem, t] = createNamespace('dialog');
@ -18,7 +19,7 @@ export type DialogAction = 'confirm' | 'cancel';
export type DialogMessageAlign = 'left' | 'center' | 'right'; export type DialogMessageAlign = 'left' | 'center' | 'right';
const popupKeys = [ const popupKeys = [
...(Object.keys(popupSharedProps) as Array<keyof typeof popupSharedProps>), ...popupSharedPropKeys,
'transition', 'transition',
'closeOnPopstate', 'closeOnPopstate',
] as const; ] as const;

View File

@ -1,6 +1,7 @@
import { PropType } from 'vue'; import { PropType } from 'vue';
import { createNamespace, UnknownProp } from '../utils'; import { createNamespace, UnknownProp } from '../utils';
import Popup, { popupSharedProps } from '../popup'; import Popup from '../popup';
import { popupSharedProps } from '../popup/shared';
const [createComponent, bem] = createNamespace('notify'); const [createComponent, bem] = createNamespace('notify');

View File

@ -1,4 +1,3 @@
// Utils
import { import {
ref, ref,
watch, watch,
@ -9,10 +8,12 @@ import {
Transition, Transition,
onActivated, onActivated,
CSSProperties, CSSProperties,
TeleportProps,
onDeactivated, onDeactivated,
} from 'vue'; } from 'vue';
import { createNamespace, isDef, UnknownProp } from '../utils';
// Utils
import { popupSharedProps } from './shared';
import { createNamespace, isDef } from '../utils';
// Composition // Composition
import { useEventListener } from '@vant/use'; import { useEventListener } from '@vant/use';
@ -36,43 +37,6 @@ const [createComponent, bem] = createNamespace('popup');
let globalZIndex = 2000; let globalZIndex = 2000;
export const popupSharedProps = {
// whether to show popup
show: Boolean,
// z-index
zIndex: [Number, String],
// transition duration
duration: [Number, String],
// teleport
teleport: [String, Object] as PropType<TeleportProps['to']>,
// overlay custom style
overlayStyle: Object as PropType<CSSProperties>,
// overlay custom class name
overlayClass: UnknownProp,
// Initial rendering animation
transitionAppear: Boolean,
// whether to show overlay
overlay: {
type: Boolean,
default: true,
},
// prevent body scroll
lockScroll: {
type: Boolean,
default: true,
},
// whether to lazy render
lazyRender: {
type: Boolean,
default: true,
},
// whether to close popup when overlay is clicked
closeOnClickOverlay: {
type: Boolean,
default: true,
},
};
export default createComponent({ export default createComponent({
inheritAttrs: false, inheritAttrs: false,

45
src/popup/shared.ts Normal file
View File

@ -0,0 +1,45 @@
import { PropType, CSSProperties, TeleportProps } from 'vue';
import { UnknownProp } from '../utils';
export const popupSharedProps = {
// whether to show popup
show: Boolean,
// z-index
zIndex: [Number, String],
// transition duration
duration: [Number, String],
// teleport
teleport: [String, Object] as PropType<TeleportProps['to']>,
// overlay custom style
overlayStyle: Object as PropType<CSSProperties>,
// overlay custom class name
overlayClass: UnknownProp,
// Initial rendering animation
transitionAppear: Boolean,
// whether to show overlay
overlay: {
type: Boolean,
default: true,
},
// prevent body scroll
lockScroll: {
type: Boolean,
default: true,
},
// whether to lazy render
lazyRender: {
type: Boolean,
default: true,
},
// whether to close popup when overlay is clicked
closeOnClickOverlay: {
type: Boolean,
default: true,
},
};
export type PopupSharedPropKeys = Array<keyof typeof popupSharedProps>;
export const popupSharedPropKeys = Object.keys(
popupSharedProps
) as PopupSharedPropKeys;

View File

@ -4,7 +4,8 @@ import { PropType } from 'vue';
import { createNamespace, pick } from '../utils'; import { createNamespace, pick } from '../utils';
// Components // Components
import Popup, { popupSharedProps } from '../popup'; import Popup from '../popup';
import { popupSharedProps } from '../popup/shared';
export type ShareSheetOption = { export type ShareSheetOption = {
name: string; name: string;