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

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

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 { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdAdd } from 'oh-vue-icons/icons'
@ -14,15 +14,26 @@ export default defineComponent(() => {
const layout = useLayoutStore()
const settings = useSettingsStore()
const router = useRouterStore()
const scrollRef = ref<any>()
const container = useSortable(
computed(() => layout.currentPage.list),
ref('page')
)
watch(
() => layout.currentPage.list.length,
(cur, old) => {
if (cur > old) {
if (scrollRef.value) {
scrollRef.value.scrollTop = scrollRef.value.scrollHeight
}
}
}
)
return () => (
<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)]"
onScroll={(e) => {
const h = (e.target as any).scrollTop

View File

@ -23,18 +23,19 @@ export default defineComponent(
props.isMini
? {}
: {
top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px',
width: settings.state.searchWidth + 'rem'
}
top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px',
width: settings.state.searchWidth + 'rem'
}
}
>
<div
class={clsx(
'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'
)}
style={{
opacity: search.focus ? 1 : settings.state.searchOpacity,
borderRadius: settings.state.searchRadius + 'px'
}}
>
@ -58,7 +59,7 @@ export default defineComponent(
onContextmenu={(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"
placeholder={`输入搜索 ${searchConfig.current.name}`}
placeholder={`请输入搜索内容`}
/>
</div>
<Transition name="searchContent">{search.showSearchConfig && <SearchConfig />}</Transition>