Penjelasan terperinci tentang arahan Vue untuk melaksanakan penyesuaian resolusi elemen skrin besar

Artikel ini membawa anda pengetahuan yang berkaitan tentang vue Ia terutamanya memperkenalkan penjelasan terperinci tentang arahan Vue untuk melaksanakan penyesuaian resolusi elemen skrin besar, termasuk penyelesaian penyesuaian biasa dan penyelesaian penskalaan css, dsb. Tunggu, mari kita lakukan. lihatlah bersama, semoga bermanfaat untuk semua.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Dengan bahagian hadapan teknologi Dengan pembangunan berterusan pusat data (platform tengah) dan konsep-konsep lain, dan kemas kini dan mempopularkan peranti Internet of Things, semakin ramai pemilik (projek) suka menambah satu atau lebih skrin visual yang besar pada sistem untuk data paparan Centrally perubahan, perubahan lokasi, dll. Bos juga lebih suka memanggilnya "situasi".

Sudah tentu, pengaturcara umumnya tidak peduli apa yang difikirkan oleh "bos", selagi mereka menyelesaikan projek itu. Tetapi selalunya terdapat masalah seperti ini: Saya mempunyai templat skrin besar, tetapi resolusi penyemak imbas pengguna tidak mencukupi, atau ada yang mempunyai bar penanda halaman dan ada yang tidak, atau ada yang skrin penuh dan ada yang hanya tingkap kecil. Dengan cara ini, terdapat keperluan untuk kod untuk menyesuaikan diri dengan senario resolusi yang berbeza.

1. Penyelesaian penyesuaian biasa

Penyelesaian penyesuaian sisi web yang biasa kami gunakan termasuk yang berikut:

• vw/vh ialah dilaksanakan dengan peratusan, membenarkan elemen melaraskan secara automatik mengikut saiz tetingkap
• fontSize berfungsi dengan rem untuk mencapai penyatuan "lebar unit"
• Laraskan reka letak halaman mengikut julat resolusi yang berbeza
• Susun atur tengah, digabungkan dengan lebar minimum

Kebanyakan penyelesaian penyesuaian skrin semasa menggunakan kaedah di atas, tetapi kaedah ini juga mempunyai kelemahan besar:Teks penyemak imbas mempunyai saiz minimum!

Pada skrin biasa dengan resolusi 1080p dan ke atas, perkadaran dan kesan paparan kebanyakan lukisan reka bentuk boleh dipulihkan dengan sempurna. Walau bagaimanapun, jika terdapat terlalu banyak kandungan halaman dalam sistem tertentu, atau resolusi yang digunakan oleh penyemak imbas (bukan resolusi fizikal) tidak memenuhi keperluan paparan penuh, menggunakan kaedah di atas boleh menyebabkan saiz terkira teks untuk meningkat. jika ia lebih kecil daripada saiz fon minimum penyemak imbas , kemungkinan gaya halaman akan runtuh kerana lebar teks melebihi elemen.

Susun atur tengah dan lebar minimum boleh memastikan kesan paparan, tetapi ia tidak sesuai untuk projek skrin besar.

2. Penyelesaian penskalaan CSS3

Apabila penyelesaian di atas tidak berpuas hati, semua orang secara amnya akan menggunakan penyelesaian lain: penskalaan skala CSS3.

Laraskan nisbah penskalaan elemen secara dinamik dengan mengira nisbah saiz lukisan reka bentuk dan saiz kawasan paparan halaman sebenar.

Secara peribadi, saya fikir ini adalah cara terbaik untuk mengekalkan kandungan paparan dan gaya pada resolusi kecil.

Sudah tentu, kaedah ini masih mempunyai beberapa kelemahan:

• Paparan tepi mungkin kabur selepas penskalaan
• Jika terdapat unsur kanvas di dalamnya, ia boleh menyebabkan kabur di dalam kanvas. herotan pemaparan kandungan
• Amap 1.x akan menyebabkan koordinat acara mengimbangi (2.0 telah dibetulkan)
• ...

3 . Enkapsulasi Arahan penskalaan

Berikut ialah semakan ringkas arahan tersuai Vue: dengan mengkonfigurasi arahan tersuai dan parameter pengikatan, logik pemprosesan yang sepadan dilaksanakan pada masa yang berbeza seperti pemuatan komponen/elemen, pengemaskinian, dan kemusnahan.

Arahan tersuai Vue termasuk fungsi cangkuk berikut:

• bind: dilaksanakan apabila pengikatan arahan dihuraikan dan hanya dilaksanakan sekali
• dimasukkan: dimasukkan ke dalam induk Dilaksanakan apabila nod
• kemas kini: Dilaksanakan apabila komponen mencetuskan kemas kini
• componentUpdated: Dilaksanakan selepas semua komponen dikemas kini
• unbind: Dilaksanakan apabila elemen tidak terikat (musnah ), dan hanya dilaksanakan Sekali

Di sini kerana kita hanya perlu mengikat peristiwa ubah saiz penyemak imbas untuk melaraskan penskalaan elemen semasa pemulaan, kita hanya perlu mengkonfigurasi yang disisipkan, untuk mengoptimumkan logik kod dan mengurangkan penggunaan sumber, dsb. , ia juga perlu untuk membatalkan fungsi panggil balik acara ubah saiz dalam peringkat unbind.

Kod adalah seperti berikut:

// 缩放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 获取显示区域高宽
    const width = window.innerWidth;
    const height = window.innerHeight;
    el.style.transformOrigin = origin;
    if (target === "ratio") {
      const scaleX = width / CONF.width;
      const scaleY = height / CONF.height;
      el.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / CONF.width;
      }
      if (target === "height") {
        scaleProportion = height / CONF.height;
      }
      el.style.transform = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options = binding.options || { passive: true };
  const callback = () => transformScale(el, binding.value);
  window.addEventListener("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  window.removeEventListener("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

Penjelasan: Perintah

• menerima parameter objek untuk menentukan kaedah pengiraan perkadaran dan penentududukan skala
• Objek CONF konfigurasi global diperlukan untuk menentukan saiz halaman lalai
• Untuk memastikan halaman telah dimuatkan dan elemen dom boleh diperolehi, Vue.nextTick perlu dipanggil
• Acara mendengar perlu dimusnahkan

Keseluruhan kod sebenarnya sangat mudah, iaitu untuk melaraskan nisbah zum elemen dengan mendengar acara ubah saiz.

Tetapi di sini saya juga membuat sedikit konfigurasi untuk menyesuaikan diri dengan lebih banyak situasi:

• Menerima konfigurasi sasaran untuk mengesahkan kaedah pengiraan perkadaran; lebar atau tinggi boleh digunakan sebagai standard penskalaan bersatu, atau boleh dikira secara berasingan
• Menerima konfigurasi asal transformasi untuk memastikan elemen pada kedudukan berbeza Anda boleh mengezum ke kedudukan berbeza untuk mengelakkan penskalaan mengimbangi
• tidak melibatkan saiz elemen terikat, hanya saiz lalai diperlukan semasa menulis kod, anda boleh mengkonfigurasi saiz elemen secara terus mengikut reka bentuk lukisan

Sudah tentu arahan ini tidak boleh dikatakan sempurna masih terdapat banyak kelemahan, seperti tiada anti goncang, penskalaan tidak akan mengubah saiz yang ditentukan oleh css, bar skrol terdedah. muncul, dll.;

Dan kerana sebelumnya Projek ini juga melibatkan banyak carta dan peta, yang sering membawa kepada beberapa masalah paparan, jadi beberapa arahan baru ditambah kemudian, tetapi isu penyesuaian resolusi masih perlu ditentukan berdasarkan situasi sebenar.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Atas ialah kandungan terperinci Penjelasan terperinci tentang arahan Vue untuk melaksanakan penyesuaian resolusi elemen skrin besar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!