q-layout 中是否有一种方法可以滚动到类星体的顶部？

Question

我在 q 对话框中有一个 q 布局（如下所示的一个简单布局），当某个过程完成时，我需要在其中滚动页面顶部。

    <q-dialog v-model="is_form_dialog_open">
        <q-layout view="hhh LpR fff" container ref="scroll_area" id="top" style="max-height: 1200px: width: 1200px; max-width: 1200px;" class="bg-white shadow-3 rounded-borders">
            <q-header elevated class="bg-grey-3 text-black">
                <q-toolbar>
                    <q-toolbar-title> Add </q-toolbar-title>
                </q-toolbar>
            </q-header>
            <q-page-container class="row q-ma-sm">
                ...
            </q-page-container>
            <q-footer elevated class="bg-grey-2 text-white">
                <q-toolbar class="justify-end q-pa-sm q-gutter-sm">
                    <q-btn label="Test" @click="test()" color="primary" />  
                </q-toolbar>
            </q-footer>
        </q-layout>
    </q-dialog>

有一个组件 q-page-scroller 可以轻松滚动到布局顶部，但它使用的是点击。我需要一种可以通过方法触发它（滚动到顶部）的方法。有没有滚动到 q-layout 顶部的方法？

Answer 1

是的，有一个方法：

...
methods: {
   GoToTop() {
       window.scrollTo(0, 0);
   },
...

耦合到一个按钮：

<q-btn icon="open_in_browser" @click="GoToTop()" />

Answer 2

我使用 here 中的这段代码滚动到顶部。只需使用您的 header 元素作为 el.

调用该方法

import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll // takes an element 

object function scrollToElement (el) { 
       const target = getScrollTarget(el)
       const offset = el.offsetTop const duration = 1000 setScrollPosition(target, offset, duration) 
}

Answer 3

我对 OP 的问题的两分钱。

stores/ui.js 为共享 UI 状态和方法创建 Pinia 存储。

import { defineStore } from 'pinia'

export const useUI = defineStore('ui-store', {
  actions: {
    setScrollPosition: (axis = 'vertical', offset = 0, duration = 0) => null,
  },
})

layouts/MainLayout.vue 创建您的布局并用 q-scroll-area 组件包装它

<template>
  <q-layout>
    <q-scroll-area
      ref="scrollPageRef"
      style="height: 100vh">
      <q-page-container>
        <router-view />
      </q-page-container>
    </q-scroll-area>
  </q-layout>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { useUI } from 'stores/ui'

export default defineComponent({
  name: 'MainLayout',
  setup () {
    const ui = useUI()
    const scrollPageRef = ref(null)

    ui.$onAction(({ name, args }) => {
      switch (name) {
        case 'setScrollPosition':
          scrollPageRef.value.setScrollPosition(args[0], args[1], args[2])
      }
    })
    return {
      scrollPageRef,
    }
  },
})
</script>

components/SomeComponent.vue 从要调用 scoll 操作的地方创建组件。

<template>
  <q-page-sticky position="bottom-right" :offset="[18, 18]">
    <q-btn @click="scrollToTop" fab icon="keyboard_arrow_up" />
  </q-page-sticky>
</template>
<script>
import { useUI } from 'stores/ui'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'BackToTopComponent',
  setup () {
    const ui = useUI()
    const scrollToTop = () =>{
      ui.setScrollPosition('vertical', 0, 250)
    }
    return {
      scrollToTop,
    }
  },
})
</script>

pages/SomePage.vue 创建您的页面

<template>
  <q-page>
    <div id="some-page-content"></div>
    <some-component/>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue'
import SomeComponent from 'components/SomeComponent.vue'

export default defineComponent({
  name: 'SomePage',
  components: {
    SomeComponent,
  },
})
</script>
<style scoped>
#some-page-content {
  height: 500vh;
}
</style>

router/routes.js 添加你的路线

const routes = [
  {
    path: '/test',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/SomePage.vue'),
      },
    ],
  },
]

q-layout 中是否有一种方法可以滚动到类星体的顶部？

Is there a method within q-layout to scroll to top in quasar?

quasar