feat: 新增 vxe table 工具栏二次封装,提供给 vxe 原生列表使用

pull/87/head
puhui999 2025-04-27 18:13:08 +08:00
parent c200490585
commit 5c4b95b01e
4 changed files with 74 additions and 1 deletions

View File

@ -0,0 +1 @@
export { default as TableToolbar } from './table-toolbar.vue';

View File

@ -0,0 +1,54 @@
<script setup lang="ts">
import type { VxeToolbarInstance } from 'vxe-table';
import { ref } from 'vue';
import { useContentMaximize, useRefresh } from '@vben/hooks';
import { Fullscreen, RefreshCw, Search } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { VxeToolbar } from 'vxe-table';
/** 列表工具栏封装 */
defineOptions({ name: 'TableToolbar' });
const props = defineProps<{
hiddenSearch: boolean;
}>();
const emits = defineEmits(['update:hiddenSearch']);
const toolbarRef = ref<VxeToolbarInstance>();
const { toggleMaximizeAndTabbarHidden } = useContentMaximize();
const { refresh } = useRefresh();
/** 隐藏搜索栏 */
function onHiddenSearchBar() {
emits('update:hiddenSearch', !props.hiddenSearch);
}
defineExpose({
getToolbarRef: () => toolbarRef.value,
});
</script>
<template>
<VxeToolbar ref="toolbarRef" custom>
<template #toolPrefix>
<slot></slot>
<Button class="ml-2 font-[8px]" shape="circle" @click="onHiddenSearchBar">
<Search :size="15" />
</Button>
<Button class="ml-2 font-[8px]" shape="circle" @click="refresh">
<RefreshCw :size="15" />
</Button>
<Button
class="ml-2 font-[8px]"
shape="circle"
@click="toggleMaximizeAndTabbarHidden"
>
<Fullscreen :size="15" />
</Button>
</template>
</VxeToolbar>
</template>

View File

@ -55,10 +55,12 @@ export {
Pin,
PinOff,
Plus,
RefreshCw,
RotateCw,
Search,
SearchX,
Settings,
ShieldQuestion,
Shrink,
Square,
SquareCheckBig,
@ -69,5 +71,4 @@ export {
Upload,
UserRoundPen,
X,
RefreshCw,
} from 'lucide-vue-next';

View File

@ -17,8 +17,25 @@ export function useContentMaximize() {
},
});
}
function toggleMaximizeAndTabbarHidden() {
const isMaximize = contentIsMaximize.value;
updatePreferences({
header: {
hidden: !isMaximize,
},
sidebar: {
hidden: !isMaximize,
},
tabbar: {
enable: isMaximize,
},
});
}
return {
contentIsMaximize,
toggleMaximize,
toggleMaximizeAndTabbarHidden,
};
}