javascript - 如何将 Vuetify 对话框标题的位置固定到顶部并使按钮始终可见

Question

我试图在滚动时将 Vuetify 对话框标题和内容的标题固定在顶部。我使用“样式:”位置:固定“。
当我滚动时，标题和标题不在 View 中。当前代码如下所示

    <v-layout row wrap  >
         <v-flex class="text-xs-center">
             <v-dialog v-model="isDialogTips" max-width=800>
                <v-card>
                    <v-card-title
                    class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
                    {{dialogTipsHeading}}</v-card-title>
                   
                        <!-- Displaying Tips matrix Headers-->
                    <v-layout 
                        v-if="dialogTableOn"
                        row wrap
                        class="text-xs-center mx-auto pt-2 justify-space-between  teal--text darken-4 "
                        style="width:600px;"
                        >

                        ....
                        Table Headers
                        ....

                    </v-layout>

                    ....
                    some Table of content
                    ....
                    
                    <!-- Diplaying dialog buttons -->
                        <v-layout 
                         >
                          <v-card-actions
                          class="text-xs-center mx-auto justify-space-around">
                              <v-btn  v-if="dialogTipsBtn1"  class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text @click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
                              <v-btn  v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark color="green darken-4" text @click="clearDialog('yes')">{{dialogTipsBtn2}}</v-btn>
                          </v-card-actions>

                      </v-layout>

                  </v-card>
            </v-dialog>
         </v-flex>

    </v-layout>

这是调用对话框的函数

handleDialog()
{
  this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
  
  this.dialogTipsBtn1 = ""
  this.dialogTipsBtn2 = "OK"
  this.dialogTableOn = true,
  this.isDialogTips = true
 }

我得到的结果是这样的



请提出一种将内容(标题和表格标题)固定在顶部并滚动表格内容的方法。另外，有没有办法让操作按钮始终可见？

先感谢您!

Answer 1

最后，我自己修好了

这是关于在“v-dialog”组件中添加一个“可滚动” Prop ，然后设置“v-card-text”组件的高度

<v-dialog scrollable v-model = "isDialogTips"
    max-width = 800 >

  ....
  code (title/heading/headers)
  ...

  <v-card-text
  style = "height: 600px;" >
    ....
    code
    .... 
  </v-card-text>

</v-dialog>

现在，根据需要，结果看起来像这样。标题和标题位于顶部，按钮始终在底部可见。