Bagaimana untuk menukar skrin menjadi segi empat sama dalam vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan aplikasi web. Apabila kita membangunkan aplikasi web, kita biasanya perlu memaparkan pelbagai jenis elemen pada halaman, seperti imej, butang, kotak teks, dan sebagainya. Biasanya, unsur-unsur ini dipaparkan dalam kotak segi empat tepat, dan pembangun mungkin ingin menukar kotak segi empat tepat ini kepada segi empat sama untuk kesan visual yang lebih baik.

Dalam Vue, jika anda ingin menukar kotak segi empat tepat kepada segi empat sama, anda perlu memahami hubungan antara lebar dan tinggi unsur tersebut terlebih dahulu. Jika lebar dan tinggi sesuatu unsur adalah sama, maka ia adalah segi empat sama. Oleh itu, kita perlu kod untuk memastikan lebar dan ketinggian elemen sama. Di bawah, kami akan memperkenalkan cara menggunakan Vue untuk mencapai kesan ini.

Kaedah 1: Gunakan CSS tulen untuk melaksanakan segi empat sama

Anda boleh menetapkan elemen pseudo sebagai pemegang tempat dalam CSS dan menggunakan elemen Pseudo sebelum atau selepas untuk memastikan semuanya boleh dipaparkan dengan segera tanpa mengira gambar atau kotak teks. Tetapkan ia kepada segi empat sama, contoh kod adalah seperti berikut:

<style>
  .square {
    position: relative;
    width: 300px;
    height: 0;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
  }
  .square::before {
    content: "";
    display: block;
    padding-top: 100%; /* Content Aspect Ratio */
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

<div class="square">
  <div class="content">Hello World!</div>
</div>

Ambil perhatian bahawa kaedah ini akan menambah elemen pseudo kosong pada elemen. Walaupun elemen ini mempunyai overhed prestasi yang kecil, ia memerlukan pemaparan tambahan dan oleh itu boleh menjejaskan prestasi.

Kaedah 2: Gunakan arahan Vue untuk melaksanakan petak

Jika anda ingin melaksanakan petak dalam Vue, sila gunakan arahan tersuai. Arahan tersuai ialah sejenis arahan yang boleh digunakan untuk menambahkan gelagat dan sifat khas pada aplikasi Vue.

Langkah-langkah untuk menentukan arahan adalah seperti berikut:

1. Dalam aplikasi Vue, tentukan arahan global:

Vue.directive('square', {
  inserted: function (el) {
    el.style.width = el.clientHeight + 'px'
  }
})

Perhatikan bahawa cangkuk yang dimasukkan fungsi digunakan apabila elemen Dipanggil apabila dimasukkan ke dalam DOM. Dalam contoh ini, kami menggunakan fungsi JavaScript mudah untuk menetapkan lebar elemen kepada ketinggiannya.

2. Dalam elemen yang perlu diduakan, gunakan arahan "v-square" untuk menambah arahan ini:

<template>
  <div v-square>
    ...
  </div>
</template>

Dalam contoh ini, kita akan "v- arahan kuasa dua" " ditambah pada elemen div yang perlu diduakan.

Kini, apabila arahan "v-square" ditambahkan pada elemen, lebar dan ketinggian elemen boleh ditetapkan secara automatik kepada nilai yang sama melalui arahan, dengan itu mencapai kesan segi empat sama.

Kaedah 3: Gunakan JavaScript untuk melaksanakan petak

Vue juga boleh melaksanakan petak melalui kod JavaScript. Dalam contoh ini, kami akan menggunakan fungsi cangkuk kitar hayat "dipasang" untuk mengira ketinggian dan lebar elemen dan menetapkan nilainya menggunakan kod JavaScript.

export default {
  mounted() {
    let el = this.$el
    let height = el.clientHeight
    el.style.width = height + 'px'
  }
}

Dengan menggunakan fungsi yang dipasang, kita boleh menjalankan kod ini apabila tika Vue dipasang ke dalam DOM. Dalam contoh ini, kami menggunakan sifat clientHeight untuk mendapatkan ketinggian elemen. Kami kemudian menggunakan kod JavaScript untuk menetapkan lebar elemen kepada ketinggiannya.

Tidak kira kaedah yang anda pilih, anda boleh menukar kotak segi empat tepat kepada segi empat sama dengan mudah menggunakan Vue. Anda boleh memilih untuk melaksanakannya dalam CSS menggunakan elemen pseudo, melaksanakannya menggunakan arahan Vue, atau mengira ketinggian dan lebar elemen melalui kod JavaScript. Kaedah ini semuanya boleh memberikan kesan yang menyenangkan secara visual kepada aplikasi web anda.

Atas ialah kandungan terperinci Bagaimana untuk menukar skrin menjadi segi empat sama dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!