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

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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 bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Pembangunan pelbagai halaman Vue adalah cara untuk membina aplikasi menggunakan rangka kerja VUE.JS, di mana permohonan dibahagikan kepada halaman berasingan: Penyelenggaraan kod: Memisahkan aplikasi ke dalam beberapa halaman boleh menjadikan kod lebih mudah untuk dikendalikan dan diselenggarakan. Modularity: Setiap halaman boleh digunakan sebagai modul yang berasingan untuk penggunaan semula dan penggantian mudah. Routing mudah: Navigasi antara halaman boleh diuruskan melalui konfigurasi penghalaan mudah. Pengoptimuman SEO: Setiap halaman mempunyai URL sendiri, yang membantu SEO.

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Terdapat tiga kaedah umum untuk vue.js untuk melintasi tatasusunan dan objek: Arahan V-untuk digunakan untuk melintasi setiap elemen dan membuat templat; Arahan V-mengikat boleh digunakan dengan V-untuk menetapkan nilai atribut secara dinamik untuk setiap elemen; dan kaedah .map boleh menukar elemen array ke dalam tatasusunan baru.

Kaedah untuk melaksanakan lompatan tag dalam Vue termasuk: menggunakan tag dalam templat HTML untuk menentukan atribut HREF. Gunakan komponen router-link routing VUE. Gunakan ini. $ Router.push () kaedah dalam JavaScript. Parameter boleh dilalui melalui parameter pertanyaan dan laluan dikonfigurasikan dalam pilihan penghala untuk lompatan dinamik.
