mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore(ActionSheet): optimize dom (#7434)
* chore(ActionSheet): optimize dom * chore: update snapshot
This commit is contained in:
neverland
GitHub
parent
134d8ccd6f
commit
0cb55c33e0
@ -8,6 +8,12 @@
|
||||
overflow: hidden;
|
||||
color: @action-sheet-item-text-color;
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&__item,
|
||||
&__cancel {
|
||||
display: block;
|
||||
@ -103,16 +109,4 @@
|
||||
color: @action-sheet-close-icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
@ -75,12 +75,6 @@ function ActionSheet(
|
||||
}
|
||||
}
|
||||
|
||||
function Content() {
|
||||
if (slots.default) {
|
||||
return <div class={bem('content')}>{slots.default()}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
function Option(item: ActionSheetItem, index: number) {
|
||||
const { disabled, loading, callback } = item;
|
||||
|
||||
@ -159,15 +153,13 @@ function ActionSheet(
|
||||
safeAreaInsetBottom={props.safeAreaInsetBottom}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
<div class={bem('inner')}>
|
||||
{Header()}
|
||||
{Description()}
|
||||
<div class={bem('main')}>
|
||||
{props.actions && props.actions.map(Option)}
|
||||
{Content()}
|
||||
</div>
|
||||
{CancelText()}
|
||||
{Header()}
|
||||
{Description()}
|
||||
<div class={bem('content')}>
|
||||
{props.actions && props.actions.map(Option)}
|
||||
{slots.default?.()}
|
||||
</div>
|
||||
{CancelText()}
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,86 +2,66 @@
|
||||
|
||||
exports[`callback events 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
|
||||
<div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
|
||||
<div class="van-action-sheet__subname">Subname</div></button></div>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
<div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
|
||||
<div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
|
||||
<div class="van-action-sheet__subname">Subname</div></button></div>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`close-icon prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
||||
<!----></i></div>
|
||||
<div class="van-action-sheet__main"></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
||||
<!----></i></div>
|
||||
<div class="van-action-sheet__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`closeable prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__header">Title</div>
|
||||
<div class="van-action-sheet__main"></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__header">Title</div>
|
||||
<div class="van-action-sheet__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`color option 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`description prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__description">This is a description</div>
|
||||
<div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__description">This is a description</div>
|
||||
<div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`description slot 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__description">Custom Description</div>
|
||||
<div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__description">Custom Description</div>
|
||||
<div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable lazy-render 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
<div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title and default slot 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
||||
<!----></i></div>
|
||||
<div class="van-action-sheet__main">
|
||||
<div class="van-action-sheet__content">Default</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
||||
<!----></i></div>
|
||||
<div class="van-action-sheet__content">Default</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`round prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__inner">
|
||||
<div class="van-action-sheet__main"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
<div class="van-action-sheet__content"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user