Bolehkah vue menjadi adaptif?
Vue boleh mencapai penyesuaian diri Kaedah untuk mencapai penyesuaian diri ialah: 1. Pasang komponen "skala-kotak" melalui arahan "npm install" atau "yarn add", dan gunakan "scale-. box" untuk mencapai penyesuaian diri. Dilengkapi dengan zum; 2. Sesuaikan dengan menetapkan nisbah piksel peranti; 3. Laraskan nisbah zum dengan menetapkan atribut zum melalui JS untuk mencapai penyesuaian.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue2&&vue3, komputer Dell G3.
Bolehkah vue menjadi adaptif?
Ya.
Penjelasan terperinci tentang tiga kaedah pelaksanaan penyesuaian skrin Vue
Gunakan komponen kotak skala
Atribut:
-
width
Lalai Lebar1920
-
height
Lalai Ketinggian1080
-
bgc
Lalai Warna latar belakang"transparent"
-
delay
Masa tunda anti-goncang penskalaan adaptif ( ms) Lalai100
versi vue2: komponen penskalaan penyesuaian skrin besar vue2 (kotak skala vue2 - npm)
npm pasang vue2-scale-box
atau
benang tambah vue2-scale-box
Penggunaan:
<template> <div> <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100"> <router-view /> </scale-box> </div> </template> <script> import ScaleBox from "vue2-scale-box"; export default { components: { ScaleBox }, }; </script> <style lang="scss"> body { margin: 0; padding: 0; background: url("@/assets/bg.jpg"); } </style>
versi vue3: komponen penskalaan penyesuaian skrin besar vue3 (kotak skala vue3 - npm)
npm pasang kotak skala vue3
atau
benang tambah vue3-skala-kotak
Penggunaan:
<template> <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100"> <router-view /> </ScaleBox> </template> <script> import ScaleBox from "vue3-scale-box"; </script> <style lang="scss"> body { margin: 0; padding: 0; background: url("@/assets/bg.jpg"); } </style>
Tetapkan nisbah piksel peranti (nisbah piksel peranti)
Buat fail devicePixelRatio.js baharu di bawah kegunaan projek
class devicePixelRatio { /* 获取系统类型 */ getSystem() { const agent = navigator.userAgent.toLowerCase(); const isMac = /macintosh|mac os x/i.test(navigator.userAgent); if (isMac) return false; // 目前只针对 win 处理,其它系统暂无该情况,需要则继续在此添加即可 if (agent.indexOf("windows") >= 0) return true; } /* 监听方法兼容写法 */ addHandler(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } } /* 校正浏览器缩放比例 */ correct() { // 页面devicePixelRatio(设备像素比例)变化后,计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化 document.getElementsByTagName("body")[0].style.zoom = 1 / window.devicePixelRatio; } /* 监听页面缩放 */ watch() { const that = this; // 注意: 这个方法是解决全局有两个window.resize that.addHandler(window, "resize", function () { that.correct(); // 重新校正浏览器缩放比例 }); } /* 初始化页面比例 */ init() { const that = this; // 判断设备,只在 win 系统下校正浏览器缩放比例 if (that.getSystem()) { that.correct(); // 校正浏览器缩放比例 that.watch(); // 监听页面缩放 } } } export default devicePixelRatio;
Perkenalkan dalam App.vue dan Just gunakannya
<template> <div> <router-view /> </div> </template> <script> import devPixelRatio from "@/utils/devicePixelRatio.js"; export default { created() { new devPixelRatio().init(); // 初始化页面比例 }, }; </script> <style lang="scss"> body { margin: 0; padding: 0; } </style>
Laraskan nisbah zum dengan menetapkan atribut zum melalui JS
Buat fail monitorZoom.js baharu di bawah utils projek
export const monitorZoom = () => { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf("msie")) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if ( window.outerWidth !== undefined && window.innerWidth !== undefined ) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; };
Perkenalkan dan gunakannya dalam main.js
import { monitorZoom } from "@/utils/monitorZoom.js"; const m = monitorZoom(); if (window.screen.width * window.devicePixelRatio >= 3840) { document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时 } else { document.body.style.zoom = 100 / Number(m); }
Dapatkan kod lengkap
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; /* 调整缩放比例 start */ import { monitorZoom } from "@/utils/monitorZoom.js"; const m = monitorZoom(); if (window.screen.width * window.devicePixelRatio >= 3840) { document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时 } else { document.body.style.zoom = 100 / Number(m); } /* 调整缩放比例 end */ Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App), }).$mount("#app");
Peleraian skrin
Dapatkan lebar skrin:
window.screen.width * window.devicePixelRatio
Dapatkan ketinggian daripada skrin:
window.screen.height * window.devicePixelRatio
Penyesuaian terminal mudah alih (menggunakan pemalam postcss-px-to-viewport)
Tapak web rasmi: https://www.php.cn/link/2dd6d682870e39d9927b80f8232bd276
ataunpm pasang postcss-px-to-viewport< --save-dev >
tambah benang -D postcss-px-to-viewportKonfigurasikan parameter pemalam penyesuaian (buat . fail postcssrc.js dalam direktori akar projek [rata dengan direktori src] Tahap]) Tampal kod berikut
module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 需要转换的单位,默认为"px" viewportWidth: 390, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度,即小数点位数 propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换 viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw selectorBlackList: ["wrap"], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位 minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换 mediaQuery: false, // 是否在媒体查询的css代码中也进行转换,默认false replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件,用正则做目录名匹配,例如 'node_modules' 下的文件 landscape: false, // 是否处理横屏情况 landscapeUnit: "vw", // 横屏时使用的视窗单位,默认vw landscapeWidth: 2048 // 横屏时使用的视口宽度 } } };
tutorial video vue.js "
Atas ialah kandungan terperinci Bolehkah vue menjadi adaptif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menggunakan ECharts dalam Vue memudahkan untuk menambahkan keupayaan visualisasi data pada aplikasi anda. Langkah khusus termasuk: memasang pakej ECharts dan Vue ECharts, memperkenalkan ECharts, mencipta komponen carta, mengkonfigurasi pilihan, menggunakan komponen carta, menjadikan carta responsif kepada data Vue, menambah ciri interaktif dan menggunakan penggunaan lanjutan.

Soalan: Apakah peranan lalai eksport dalam Vue? Penerangan terperinci: eksport lalai mentakrifkan eksport lalai komponen. Apabila mengimport, komponen diimport secara automatik. Permudahkan proses import, tingkatkan kejelasan dan cegah konflik. Biasa digunakan untuk mengeksport komponen individu, menggunakan kedua-dua eksport bernama dan lalai, dan mendaftarkan komponen global.

Fungsi peta Vue.js ialah fungsi tertib tinggi terbina dalam yang mencipta tatasusunan baharu di mana setiap elemen ialah hasil yang diubah bagi setiap elemen dalam tatasusunan asal. Sintaks ialah map(callbackFn), di mana callbackFn menerima setiap elemen dalam tatasusunan sebagai argumen pertama, secara pilihan indeks sebagai argumen kedua, dan mengembalikan nilai. Fungsi peta tidak mengubah tatasusunan asal.

Dalam Vue.js, acara ialah peristiwa JavaScript asli yang dicetuskan oleh penyemak imbas, manakala $event ialah objek peristiwa abstrak khusus Vue yang digunakan dalam komponen Vue. Secara amnya lebih mudah untuk menggunakan $event kerana ia diformat dan dipertingkatkan untuk menyokong pengikatan data. Gunakan acara apabila anda perlu mengakses kefungsian khusus objek acara asli.

Terdapat dua cara untuk mengeksport modul dalam Vue.js: eksport dan eksport lalai. eksport digunakan untuk mengeksport entiti bernama dan memerlukan penggunaan pendakap kerinting lalai eksport digunakan untuk mengeksport entiti lalai dan tidak memerlukan pendakap kerinting. Apabila mengimport, entiti yang dieksport melalui eksport perlu menggunakan nama mereka, manakala entiti yang dieksport secara lalai eksport boleh digunakan secara tersirat. Adalah disyorkan untuk menggunakan lalai eksport untuk modul yang perlu diimport beberapa kali dan menggunakan eksport untuk modul yang hanya dieksport sekali.

onMounted ialah cangkuk kitaran hayat pemasangan komponen dalam Vue Fungsinya adalah untuk melaksanakan operasi pemulaan selepas komponen dipasang pada DOM, seperti mendapatkan rujukan kepada elemen DOM, menetapkan data, menghantar permintaan HTTP, mendaftarkan pendengar acara, dsb. Ia hanya dipanggil sekali apabila komponen dipasang Jika anda perlu melakukan operasi selepas komponen dikemas kini atau sebelum ia dimusnahkan, anda boleh menggunakan cangkuk kitar hayat yang lain.

Cangkuk Vue ialah fungsi panggil balik yang melakukan tindakan pada peristiwa tertentu atau peringkat kitaran hayat. Ia termasuk cangkuk kitaran hayat (seperti beforeCreate, mounted, beforeDestroy), cangkuk pengendalian acara (seperti klik, input, keydown) dan cangkuk tersuai. Cangkuk meningkatkan kawalan komponen, bertindak balas kepada kitaran hayat komponen, mengendalikan interaksi pengguna dan meningkatkan kebolehgunaan semula komponen. Untuk menggunakan cangkuk, hanya tentukan fungsi cangkuk, laksanakan logik dan kembalikan nilai pilihan.

Pengubah suai acara Vue.js digunakan untuk menambah gelagat tertentu, termasuk: menghalang gelagat lalai (.prevent) menghentikan acara menggelegak (.stop) acara sekali (.sekali) menangkap acara (.capture) mendengar acara pasif (.pasif) Suai pengubah suai (.self)Pengubah suai kunci (.key)
