Quasar的Page内容单独滚动

描述：
在进行quasar前端开发过程中，由于侧边栏没有设置overlay属性，而是固定在左侧。当page中页面内容很长时，滚动下滑会让左侧侧边栏一起下滑。

左侧边栏菜单

解决方案：
了解到可以用q-scroll-area组件。

<template>
  <q-page padding>
    <q-scroll-area class="fit" >
    </q-scroll-area>
  </q-page>
</template>

但问题又出现了，让q-scroll-area充满q-page的width、height，height: 100%却无法生效。

看到q-page对应的main标签中，赋予了min-height: calc(100vh - 50px);样式，因此想到让q-scroll-area也赋予该样式。

最后：实现了侧边栏单独滑动，内容页单独滑动

<template>
  <q-page padding>
    <q-scroll-area style="height: calc(100vh - 50px)" >
    </q-scroll-area>
  </q-page>
</template>
// 其中50px是header的高度

单独滑动效果

如果要将其封装成组件

<template>
  <q-scroll-area class="proj-con" :class="scroll_class" >
    <div class="layout-padding" :class="content_class">
      <slot></slot>
    </div>
  </q-scroll-area>
</template>
<style lang="stylus">
.proj-con
  height calc(100vh - 50px)
</style>

<script>
export default {
  data () {
    return {
    }
  },
  props: {
    content_class: String,
    scroll_class: String
  }
}
</script>

// 其他页面使用，引入组件，使用
<q-page>
    <proj-base-scroll content_class="p-max-w">
      <p>111</p>
    </proj-base-scroll>
  </q-page>
</template>