xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加图标时，页面跟随最新添加的图标滚动

This commit is contained in:
expdsn 2024-11-15 15:26:55 +08:00
parent 4fa96b4705
commit e8d0a236dd
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/layout/grid/index.tsx
View File

@ -1,4 +1,4 @@
import { computed, defineComponent, ref, toRaw } from 'vue' import { computed, defineComponent, ref, toRaw, watch } from 'vue'
import useLayoutStore from '../useLayoutStore' import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons' import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdAdd } from 'oh-vue-icons/icons' import { MdAdd } from 'oh-vue-icons/icons'
@ -14,15 +14,26 @@ export default defineComponent(() => {
const layout = useLayoutStore() const layout = useLayoutStore()
const settings = useSettingsStore() const settings = useSettingsStore()
const router = useRouterStore() const router = useRouterStore()
const scrollRef = ref<any>()
const container = useSortable( const container = useSortable(
computed(() => layout.currentPage.list), computed(() => layout.currentPage.list),
ref('page') ref('page')
) )
watch(
() => layout.currentPage.list.length,
(cur, old) => {
if (cur > old) {
if (scrollRef.value) {
scrollRef.value.scrollTop = scrollRef.value.scrollHeight
}
}
}
)
return () => ( return () => (
<div <div
ref={scrollRef}
class="absolute left-0 top-0 w-full h-screen overflow-y-auto no-scrollbar pt-[240px] px-[calc((100%_-_var(--main-width))_/_2)]" class="absolute left-0 top-0 w-full h-screen overflow-y-auto no-scrollbar pt-[240px] px-[calc((100%_-_var(--main-width))_/_2)]"
onScroll={(e) => { onScroll={(e) => {
const h = (e.target as any).scrollTop const h = (e.target as any).scrollTop

11
src/layout/header/search/index.tsx
View File

@ -23,18 +23,19 @@ export default defineComponent(
props.isMini props.isMini
? {} ? {}
: { : {
top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px', top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px',
width: settings.state.searchWidth + 'rem' width: settings.state.searchWidth + 'rem'
} }
} }
> >
<div <div
class={clsx( class={clsx(
'w-full h-11 shadow-content overflow-hidden px-1 transition-all flex justify-between items-center gap-4 ', 'w-full h-11 shadow-content overflow-hidden px-1 transition-all flex justify-between items-center gap-4 ',
search.focus ? 'bg-white/60' : 'bg-white/40 hover:bg-white/60', search.focus ? 'bg-white/60' : 'bg-white hover:bg-white',
props.isMini ? '' : 'max-w-[90vw] w-full' props.isMini ? '' : 'max-w-[90vw] w-full'
)} )}
style={{ style={{
opacity: search.focus ? 1 : settings.state.searchOpacity,
borderRadius: settings.state.searchRadius + 'px' borderRadius: settings.state.searchRadius + 'px'
}} }}
> >
@ -58,7 +59,7 @@ export default defineComponent(
onContextmenu={(e) => e.stopPropagation()} onContextmenu={(e) => e.stopPropagation()}
onKeydown={(e) => e.stopPropagation()} onKeydown={(e) => e.stopPropagation()}
class="flex-1 h-full outline-none bg-transparent placeholder:text-slate-600 placeholder:tracking-widest text-slate-800 pr-4" class="flex-1 h-full outline-none bg-transparent placeholder:text-slate-600 placeholder:tracking-widest text-slate-800 pr-4"
placeholder={`输入搜索 ${searchConfig.current.name}`} placeholder={`请输入搜索内容`}
/> />
</div> </div>
<Transition name="searchContent">{search.showSearchConfig && <SearchConfig />}</Transition> <Transition name="searchContent">{search.showSearchConfig && <SearchConfig />}</Transition>