主页 / 问题 / 1001430
Accepted
Александр К
Asked:2020-07-10 20:50:15 +0000 UTC2020-07-10 20:50:15 +0000 UTC

如何给v-dialog组件属性border-radius：10px？

  • 772

默认情况下，文件中设置了 v-dialog vuetify.min.js，但是如果您在 CSS 中为border-radiusborder-radius: 2px属性设置不同的值，则不会发生任何事情。

有一些解决方案，我不想硬编码。

vue.js

1 个回答

  1. Best Answer

    您可以使用元素的类（在您的情况下）和!important.v-dialog CSS 属性来完成您的任务。

    在样式文件中应用以下条目就足够了： .v-dialog{border-radius:10px !important}

    为了清楚起见，我举了一个例子：

    .v-dialog{border-radius:10px !important}
    <!DOCTYPE html>
<html>
<head>

 <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@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
        <template>
            <div class="text-xs-center">
              <v-dialog
                v-model="dialog"
                width="800"
              >
                <template v-slot:activator="{ on }">
                  <v-btn
                    color="red lighten-2"
                    dark
                    v-on="on"
                  >
                    Открыть диалог
                  </v-btn>
                </template>

                <v-card>
                  <v-card-title
                    class="title grey lighten-2"
                    primary-title
                  >
                    Скругление уголков v-dialog на 10px
                  </v-card-title>

                  <v-card-text>
                     реализовано через CSS свойство border-radius ...
                  </v-card-text>

                  <v-divider></v-divider>

                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                      color="primary"
                      
                      @click="dialog = false"
                    >
                      OK
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </div>
          </template>
        </v-container>
      </v-main>
    </v-app>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
  <script>
    new Vue({ 
    el: '#app',
    vuetify: new Vuetify(),
    data :{
        dialog: false
      }
    })
  </script>
</body>
</html>

    • 1

相关问题