vue menukar gaya dialog

Vue ialah rangka kerja JavaScript popular yang digunakan oleh banyak pembangun web untuk membina aplikasi satu halaman yang dinamik dan interaktif. Salah satu fungsi biasa adalah untuk memaparkan kandungan interaktif melalui tetingkap pop timbul dialog Dari segi pelaksanaan khusus, membuka tetingkap pop timbul dialog adalah agak mudah, tetapi menukar gaya adalah lebih mencabar. Artikel ini akan meneroka cara menukar gaya komponen dialog dalam Vue.

Dialog Analisis

Komponen Dialog Vue ialah komponen yang dipaparkan secara dinamik, yang terbahagi terutamanya kepada dua aspek, gaya dan data. Komponen Dialog itu sendiri terdiri daripada lapisan elemen HTML yang mengandungi lapisan topeng dan kotak dialog. Lapisan topeng digunakan untuk menutup keseluruhan skrin untuk menghalang pengguna daripada terus berinteraksi dengan halaman selepas tetingkap pop timbul dibuka. Kotak dialog akan memaparkan kandungan dan data tertentu. Melalui analisis Dialog, kita dapat melihat bahawa proses pengubahsuaian gaya memerlukan kawalan kedua-dua aspek ini.

Menggunakan gaya global

Cara biasa untuk mengubah suai gaya Dialog ialah menggunakan gaya global. Dengan mentakrifkan gaya CSS pada peringkat aplikasi, anda boleh mengatasi lalai atau menambah gaya tersuai. Ini bermakna kita boleh menukar gaya Dialog melalui gaya biasa yang serupa dengan yang berikut:

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

Dalam gaya di atas, kami mentakrifkan gaya skrin penuh fullscreen dan gaya dialog dialog-custom, Kemudian ikat gaya ini ke dalam komponen dialog. Untuk melakukan ini, hanya ikat atribut dialogClass ke kelas gaya dialog-custom, seperti dalam coretan kod Vue berikut:

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

Kami menetapkan kelas gaya dialogCustom kepada atribut dialog-class sebagai Bind nilai untuk menggunakan gaya ini. Berbanding dengan penyelesaian lain, kaedah ini lebih mudah dan sesuai untuk situasi di mana gaya semua kotak pop timbul akan dilaraskan. Walau bagaimanapun, ia mungkin memberi kesan pada gaya Dialog yang digunakan secara global. Oleh itu, berhati-hati dengan kemungkinan kesan sampingan apabila menggunakan kaedah ini.

Sesuaikan Dialog

Cara yang lebih berkuasa untuk mengubah suai gaya Dialog ialah dengan menyesuaikan komponen Dialog. Dalam Vue, kita boleh menggunakan kaedah Vue.extend() untuk melanjutkan kawalan sedia ada atau mencipta komponen tersuai. Dengan menyesuaikan komponen Dialog, kami boleh melaraskan gaya khusus untuk situasi tertentu, jadi ini adalah pendekatan yang lebih disyorkan.

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

Dalam kod di atas, kami mencipta komponen tersuai bernama my-dialog dan memanjangkannya sebagai komponen Dialog Vuetify. Sifat komponen tersuai termasuk title dan text, dan mengandungi semua sifat lalai komponen Dialog.

Cara utama untuk mengubah suai gaya ialah menukar templat dan gaya komponen. Dalam contoh ini, gunakan gaya seperti ini:

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

Dalam gaya seperti ini, kami menggunakan pemilih .my-dialog.v-dialog .v-card untuk menukar gaya kotak dialog. Kami menukar lebar dan ketinggian kotak dialog kepada 600 piksel, dan menetapkan sudut bulat dan bayang yang lebih besar. Gunakan .v-card__text untuk menyesuaikan margin dalam dan bar skrol menegak, dan .v-card__title untuk menukar warna dan saiz fon tajuk.

Akhir sekali, untuk menggunakan komponen Dialog tersuai ini, anda perlu menggunakannya dalam templat utama:

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

Dalam kod di atas, kami menggunakan my-dialog komponen tersuai dan menetapkan Atribut yang diperlukan , seperti title dan text, dan kemudian gunakan arahan v-model dan dialog untuk mengikat data.

Kesimpulan

Dalam pembangunan web, tetingkap pop timbul dialog perlu memenuhi keperluan gaya yang berbeza. Dalam rangka kerja Vue, kami boleh menukar keperluan gaya semua dialog melalui gaya global atau mempunyai kawalan yang lebih baik ke atas butiran gaya melalui komponen tersuai. Artikel ini menyediakan kaedah yang membolehkan anda menukar gaya dialog dengan cara yang mudah atau rumit untuk disesuaikan dengan pilihan kreatif dan reka bentuk anda.

Atas ialah kandungan terperinci vue menukar gaya dialog. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!