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

【问题标题】：How to change v-dialog css styling dynamically如何动态更改 v-dialog css 样式
【发布时间】：2021-11-30 09:33:47
【问题描述】：

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

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

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

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案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>

【讨论】：

感谢您的帮助 @Nikola, :content-class="myBooleanFlag ? 'my-css-class-name' : ''" --- 甚至适用于 vuetify 1.5.XX 有趣的语法当我尝试这个时，在项目中的任何地方使用都不适用于 v-dialog: :content-class="'my-css-class-name' : myBooleanFlag"
不客气，伙计 :) 我认为content-class 只接受字符串
content-type 是每个文档的字符串类型，但为什么在这种情况下 "'my-css-class-name' : myBooleanFlag" -- 'my-css-class-name' 不是被认为是一个字符串？它不是读作“如果 myBooleanFlag 为真，则仅应用 'my-css-class-name' 吗？” @尼古拉
当然可以，但是myBooleanFlag 是布尔值，并且作为一个整体......在:content-class="myBooleanFlag ? 'my-css-class-name' : ''" 中，您在任何情况下都会得到字符串