vue はダイアログ スタイルを変更します

Vue は、多くの Web 開発者が動的でインタラクティブな単一ページ アプリケーションを構築するために使用する人気のある JavaScript フレームワークです。一般的な機能の 1 つは、ダイアログ ポップアップ ウィンドウを通じてインタラクティブなコンテンツを表示することです。具体的な実装に関しては、ダイアログ ポップアップ ウィンドウを開くことは比較的簡単ですが、スタイルを変更することはより困難です。この記事では、Vue でダイアログ コンポーネントのスタイルを変更する方法を説明します。

分析ダイアログ

Vue のダイアログ コンポーネントは動的に表示されるコンポーネントであり、主にスタイルとデータの 2 つの側面に分かれています。 Dialog コンポーネント自体は、マスク レイヤーとダイアログ ボックスを含む HTML 要素のレイヤーで構成されています。マスク レイヤーは画面全体をカバーするために使用され、ポップアップ ウィンドウが開いた後にユーザーがページを操作し続けるのを防ぎます。ダイアログ ボックスには特定のコンテンツとデータが表示されます。 Dialog の分析を通じて、スタイルを変更するプロセスではこれら 2 つの側面を制御する必要があることがわかります。

グローバル スタイルの使用

ダイアログ スタイルを変更する一般的な方法は、グローバル スタイルを使用することです。アプリケーション レベルで CSS スタイルを定義することにより、デフォルトをオーバーライドしたり、カスタム スタイルを追加したりできます。これは、次のような一般的なスタイルを通じてダイアログのスタイルを変更できることを意味します。

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

上記のスタイルでは、全画面表示スタイル fullscreen とダイアログを定義します。 box style dialog-custom を入力し、これらのスタイルをダイアログ コンポーネントにバインドします。これを行うには、次の Vue コード スニペットのように、dialogClass プロパティを dialog-custom スタイル クラスにバインドするだけです:

<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>

We will dialogCustom スタイル クラスは、このスタイルを適用するバインディング値として dialog-class 属性に割り当てられます。他のソリューションと比較して、この方法はシンプルであり、すべてのポップアップ ボックスのスタイルを調整する状況に適しています。ただし、世界中で使用されているダイアログ スタイルに影響を与える可能性があります。したがって、この方法を使用する場合は、潜在的な副作用に注意してください。

ダイアログのカスタマイズ

ダイアログ スタイルを変更するより強力な方法は、ダイアログ コンポーネントをカスタマイズすることです。 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 を使用してタイトルの色とフォント サイズを変更します。

最後に、このカスタム ダイアログ コンポーネントを使用するには、メイン テンプレートで使用する必要があります:

<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>

上記のコードでは、Define なので my-dialog を使用します。コンポーネントを作成し、title や text などの必要なプロパティを割り当ててから、v-model ディレクティブと dialog を使用してバインドします。データ。

結論

Web 開発では、ダイアログ ポップアップ ウィンドウはさまざまなスタイル要件を満たす必要があります。 Vue フレームワークでは、グローバル スタイルを通じてすべてのダイアログのスタイル要件を変更したり、カスタム コンポーネントを通じてスタイルの詳細をより適切に制御したりできます。この記事では、クリエイティブおよびデザインのオプションに合わせて、ダイアログのスタイルを単純または複雑な方法で変更できる方法を説明します。

以上がvue はダイアログ スタイルを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。