【问题标题】: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' : ''" 中,您在任何情况下都会得到字符串
    猜你喜欢
    • 1970-01-01
    • 2017-02-09
    • 2017-07-18
    • 1970-01-01
    • 1970-01-01
    • 2019-08-18
    • 1970-01-01
    • 2014-04-13
    • 2018-09-27
    相关资源
    最近更新 更多