vue change le style de dialogue

Vue est un framework JavaScript populaire utilisé par de nombreux développeurs Web pour créer des applications dynamiques et interactives d'une seule page. L'une des fonctions courantes consiste à afficher du contenu interactif via une fenêtre contextuelle de dialogue. En termes d'implémentation spécifique, ouvrir une fenêtre contextuelle de dialogue est relativement simple, mais changer le style est plus difficile. Cet article explorera comment modifier le style du composant de dialogue dans Vue.

Analysis Dialog

Le composant Dialog de Vue est un composant d'affichage dynamique, qui est principalement divisé en deux aspects, le style et les données. Le composant Dialog lui-même est composé d'une couche d'éléments HTML contenant un calque de masque et une boîte de dialogue. Le calque de masque est utilisé pour couvrir tout l'écran afin d'empêcher les utilisateurs de continuer à interagir avec la page après l'ouverture de la fenêtre contextuelle. La boîte de dialogue affichera un contenu et des données spécifiques. A travers l'analyse de Dialog, nous pouvons constater que le processus de modification du style nécessite de contrôler ces deux aspects.

Utilisation de styles globaux

Une façon courante de modifier les styles de dialogue consiste à utiliser des styles globaux. En définissant des styles CSS au niveau de l'application, vous pouvez remplacer les valeurs par défaut ou ajouter des styles personnalisés. Cela signifie que nous pouvons changer le style de la boîte de dialogue grâce à un style commun similaire au suivant :

<style>
.fullscreen{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.dialog-custom {
    width: 50%;
    height: 50%;
    border-radius: 5px;
    background: white;
}
</style>

Dans le style ci-dessus, nous définissons un style plein écran plein écran et un style de boîte de dialogue dialog-custom puis liez ces styles au composant de dialogue. Pour ce faire, liez simplement l'attribut dialogClass à la classe de style dialog-custom, comme dans l'extrait de code Vue suivant : fullscreen 和一个对话框样式 dialog-custom，然后将这些样式绑定到对话框组件中。要做到这一点，只需要将dialogClass属性绑定到 dialog-custom 样式类中，如以下 Vue 代码片段：

<template>
  <v-dialog v-model="dialog" :fullscreen="fullscreen" :overlay="overlay"
           :overlay-color="overlayColor" :overlay-opacity="overlayOpacity"
           :dialog-class="'dialog-custom'">
    <v-card>
      <v-card-title>
        <span>{{ title }}</span>
      </v-card-title>
      <v-card-text>
        <span>{{ text }}</span>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" text @click="dialog = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

我们将 dialogCustom 样式类赋值给 dialog-class 属性作为绑定值来应用此样式。相比其它解决方案，这种方法较为简单，适用于会对所有弹出框的样式进行调整的情况。 然而，它可能会对全局所使用的 Dialog 样式产生影响。所以使用这种方法要警惕潜在的副作用。

自定义 Dialog

更强大的修改 Dialog 样式的方法是自定义 Dialog 组件。在 Vue 中，我们可以使用 Vue.extend() 方法来扩展已有控件或创建自定义组件。通过自定义 Dialog 组件，我们可以针对特定情况下的特定样式进行调整，因此这是一种更为推荐的方法。

<script>
import Vue from 'vue';

export default Vue.extend({
  name: 'my-dialog',
  props: {
    title: { type: String, default: '' },
    text: { type: String, default: '' },
  },
  components: {
    VDialog,
    VCard,
    VCardActions,
    VCardText,
    VCardTitle,
    VSpacer,
  },
  data: () => ({
    dialog: false,
    fullscreen: false,
    overlay: true,
  }),
  methods: {
    showDialog() {
      this.dialog = true;
    },
    closeDialog() {
      this.dialog = false;
    },
  },
});
</script>

在上述代码中，我们创建了一个名为 my-dialog 的自定义组件，并将其扩展为 Vuetify 的 Dialog 组件。自定义组件的属性包括 title 和 text，并包含了Dialog 组件的所有默认属性。

修改样式的主要方法就是更改组件的模板和样式。在此示例中，使用如下样式：

<style scoped>
/* customize dialog style */
.my-dialog.v-dialog .v-card {
  width: 600px !important;
  height: 600px !important;
  border-radius: 10px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  overflow: hidden;
}
.my-dialog.v-dialog .v-card__text {
  padding: 0px;
  overflow-y: scroll;
  max-height: calc(100% - 152px);
}
.my-dialog.v-dialog .v-card__title {
  background-color: #3f51b5;
  font-size: 24px !important;
  color: #ffffff;
  padding: 20px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>

在这样的样式中，我们将 .my-dialog.v-dialog .v-card 选择器用于更改对话框的样式。我们将对话框的宽度和高度更改为 600 像素，并设置较大的圆角和阴影。将 .v-card__text 用于定制向内边距和纵向滚动条，而 .v-card__title 用于更改标题的颜色和字号。

最后，要使用这种自定义 Dialog 组件，需要在主要模板中使用它：

<template>
  <div>
    <v-btn @click="showDialog">Open Dialog</v-btn>
    <my-dialog v-model="dialog" :title="'Hello World!'" :text="'Welcome to my custom dialog!'"></my-dialog>
  </div>
</template>

在上面的代码中，我们使用 my-dialog 自定义组件并分配了必要的属性，如 title 和 text 然后再用 v-model 指令和 dialogrrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!