如何动态更改 v-dialog css 样式

Question

目标是能够在单击按钮时调整 v-dialog 的大小。通常我可以通过 :class 属性应用动态 css classes 来验证组件。但是，v-dialog 需要使用 content-class 才能对其应用 css class。

如何在 v-dialog 上完成类似下面代码的操作：

  <v-dialog
    persistent
    scrollable
    v-model="dialog"
    :class="{ 'my-css-class-name': myBooleanFlag }"
    style="position: relative;"
  >

Answer 1

试试 :content-class="myBooleanFlag ? 'my-css-class-name' : ''" :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      myBooleanFlag: true,
      dialog: true
    }
  }
})

.my-css-class-name {
  background: violet;
  height: 100px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div data-app id="app">
  <v-dialog
    persistent
    scrollable
    v-model="dialog"
    :content-class="myBooleanFlag ? 'my-css-class-name' : ''"
    style="position: relative;"
  >
  <button @click="myBooleanFlag = !myBooleanFlag">click</button>
</div>

如何动态更改 v-dialog css 样式

How to change v-dialog css styling dynamically

css

vue.js

vuejs2

vuetify.js