vue はダイアログスタイルを変更します-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-24 09:58:37

オリジナル

1614 人が閲覧しました

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 サイトの他の関連記事を参照してください。