Search 组件:1)修改 search 按钮的样式;2)增加 search 按钮后的 actionMore slot;3)修改 Form 向下减少 15px 间距,更紧凑

This commit is contained in:
YunaiV 2023-03-17 21:48:00 +08:00
parent d73b8431a1
commit 714dd661c4

View File

@ -98,6 +98,7 @@ const setVisible = () => {
</script> </script>
<template> <template>
<!-- update by 芋艿class="-mb-15px" 用于降低和 ContentWrap 组件的底部距离避免空隙过大 -->
<Form <Form
:is-custom="false" :is-custom="false"
:label-width="labelWidth" :label-width="labelWidth"
@ -106,21 +107,26 @@ const setVisible = () => {
:is-col="isCol" :is-col="isCol"
:schema="newSchema" :schema="newSchema"
@register="register" @register="register"
class="-mb-15px"
> >
<template #action> <template #action>
<div v-if="layout === 'inline'"> <div v-if="layout === 'inline'">
<ElButton v-if="showSearch" type="primary" @click="search"> <!-- update by 芋艿去除搜索的 type="primary"颜色变淡一点 -->
<ElButton v-if="showSearch" @click="search">
<Icon icon="ep:search" class="mr-5px" /> <Icon icon="ep:search" class="mr-5px" />
{{ t('common.query') }} {{ t('common.query') }}
</ElButton> </ElButton>
<!-- update by 芋艿 icon="ep:refresh-right" 修改成 icon="ep:refresh" ruoyi-vue 搜索保持一致 -->
<ElButton v-if="showReset" @click="reset"> <ElButton v-if="showReset" @click="reset">
<Icon icon="ep:refresh-right" class="mr-5px" /> <Icon icon="ep:refresh" class="mr-5px" />
{{ t('common.reset') }} {{ t('common.reset') }}
</ElButton> </ElButton>
<ElButton v-if="expand" text @click="setVisible"> <ElButton v-if="expand" text @click="setVisible">
{{ t(visible ? 'common.shrink' : 'common.expand') }} {{ t(visible ? 'common.shrink' : 'common.expand') }}
<Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" /> <Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
</ElButton> </ElButton>
<!-- add by 芋艿补充在搜索后的按钮 -->
<slot name="actionMore"></slot>
</div> </div>
</template> </template>
<template #[name] v-for="name in Object.keys($slots)" :key="name" <template #[name] v-for="name in Object.keys($slots)" :key="name"
@ -142,6 +148,8 @@ const setVisible = () => {
{{ t(visible ? 'common.shrink' : 'common.expand') }} {{ t(visible ? 'common.shrink' : 'common.expand') }}
<Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" /> <Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
</ElButton> </ElButton>
<!-- add by 芋艿补充在搜索后的按钮 -->
<slot name="actionMore"></slot>
</div> </div>
</template> </template>
</template> </template>