添加图标时,页面跟随最新添加的图标滚动
This commit is contained in:
parent
4fa96b4705
commit
e8d0a236dd
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue