Commit 2c42431e by lijiabin

【需求 17679】 feat: 加入相关hooks

parent bebee4b2
export * from './useResetData'
export * from './usePageSearch'
export * from './useScrollTop'
......@@ -66,7 +66,6 @@ export function usePageSearch<
[pageSizeField]: defaultSize,
...defaultParams,
} as TParams
const [searchParams, resetSearchParams] = useResetData(initialParams)
const search = async (params?: Partial<TParams>) => {
......@@ -102,7 +101,10 @@ export function usePageSearch<
await search()
}
const refresh = () => search()
const refresh = () => {
searchParams.value[pageField] = 1
search()
}
if (immediate) {
onMounted(search)
......@@ -111,7 +113,7 @@ export function usePageSearch<
return {
list: readonly(list),
total: readonly(total),
loading: readonly(loading),
loading,
searchParams,
search,
reset,
......
import type { SetupContext, MaybeRef } from 'vue'
type Events = {
handleBackTop(): void
}
function ScrollTopComp(_: any, { emit }: SetupContext<Events>) {
return (
<button
class="back-top-btn group cursor-pointer flex items-center gap-3 px-4 py-2.5 bg-gradient-to-r from-blue-50 to-indigo-50 hover:from-blue-100 hover:to-indigo-100 border border-blue-200/50 rounded-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 active:scale-95 shadow-sm"
title="回到顶部"
onClick={() => emit('handleBackTop')}
>
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full flex items-center justify-center group-hover:rotate-15 transition-transform duration-300 shadow-sm">
<SvgIcon name="icon_top" size="16" className="text-white" />
</div>
<span class="text-12px font-medium text-gray-700 group-hover:text-blue-600 transition-colors">
回到顶部
</span>
</button>
)
}
export const useScrollTop = (
el: MaybeRef<HTMLElement | null | Window>,
options: { compatFixedHeader?: boolean } = {},
) => {
const { compatFixedHeader = true } = options
const handleBackTop = () => {
const dom = unref(el)
if (!dom) return
if (dom instanceof Window) {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
return
}
if (compatFixedHeader) {
const top = dom.getBoundingClientRect().top + window.scrollY - 52
window.scrollTo({
top,
behavior: 'smooth',
})
} else {
dom.scrollIntoView({
behavior: 'smooth',
block: 'start',
})
}
}
return {
ScrollTopComp: () => <ScrollTopComp onHandleBackTop={handleBackTop}></ScrollTopComp>,
handleBackTop,
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment