From 8b7d24ad0cff07194733a1c3d65ad1ac6a782a64 Mon Sep 17 00:00:00 2001 From: tangyi <275503107@qq.com> Date: Thu, 3 Mar 2022 11:40:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BF=97=E6=84=BF=E6=B5=8B=E8=AF=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 52 +++++++++++++++++++++++----- package.json | 2 ++ public/index.html | 15 ++++++++ public/js/flexible.js | 49 +++++++++++++++++++++++++++ src/App.vue | 79 ++++++++++++++++++++++++++++++++++++++++++- src/main.js | 4 ++- 6 files changed, 191 insertions(+), 10 deletions(-) create mode 100644 public/js/flexible.js diff --git a/package-lock.json b/package-lock.json index 8657892..62dfb1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "zycp-demo", "version": "0.1.0", "dependencies": { + "axios": "^0.26.0", "core-js": "^3.6.5", "vue": "^2.6.11", + "vue-axios": "^3.4.1", "vue-router": "^3.2.0" }, "devDependencies": { @@ -3121,6 +3123,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "node_modules/axios": { + "version": "0.26.0", + "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "dependencies": { + "follow-redirects": "^1.14.8" + } + }, "node_modules/babel-eslint": { "version": "10.1.0", "resolved": "https://registry.npmmirror.com/babel-eslint/-/babel-eslint-10.1.0.tgz", @@ -6717,7 +6727,6 @@ "version": "1.14.9", "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz", "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", - "dev": true, "engines": { "node": ">=4.0" }, @@ -13609,6 +13618,15 @@ "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz", "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" }, + "node_modules/vue-axios": { + "version": "3.4.1", + "resolved": "https://registry.npmmirror.com/vue-axios/-/vue-axios-3.4.1.tgz", + "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA==", + "peerDependencies": { + "axios": ">= 0.20.0", + "vue": "^3.0.0 || ^2.0.0" + } + }, "node_modules/vue-eslint-parser": { "version": "7.11.0", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz", @@ -16635,7 +16653,8 @@ "version": "4.5.15", "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz", "integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==", - "dev": true + "dev": true, + "requires": {} }, "@vue/cli-service": { "version": "4.5.15", @@ -16772,7 +16791,8 @@ "version": "1.1.2", "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz", "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==", - "dev": true + "dev": true, + "requires": {} }, "@vue/web-component-wrapper": { "version": "1.3.0", @@ -16987,7 +17007,8 @@ "version": "5.3.2", "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "7.2.0", @@ -17017,13 +17038,15 @@ "version": "1.0.1", "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz", "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true + "dev": true, + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -17283,6 +17306,14 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "0.26.0", + "resolved": "https://registry.npmmirror.com/axios/-/axios-0.26.0.tgz", + "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==", + "requires": { + "follow-redirects": "^1.14.8" + } + }, "babel-eslint": { "version": "10.1.0", "resolved": "https://registry.npmmirror.com/babel-eslint/-/babel-eslint-10.1.0.tgz", @@ -20293,8 +20324,7 @@ "follow-redirects": { "version": "1.14.9", "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", - "dev": true + "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" }, "for-in": { "version": "1.0.2", @@ -26036,6 +26066,12 @@ "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz", "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" }, + "vue-axios": { + "version": "3.4.1", + "resolved": "https://registry.npmmirror.com/vue-axios/-/vue-axios-3.4.1.tgz", + "integrity": "sha512-8YZYUOQrBEJktxoQtrM4rr2LfVcDaWfJqv8MqtLlgLlkuBvCYKFSZSo6AXQ4YcCzdgccDqstmuaEh68lcH9xWA==", + "requires": {} + }, "vue-eslint-parser": { "version": "7.11.0", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz", diff --git a/package.json b/package.json index cce3f31..2fe8da9 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "axios": "^0.26.0", "core-js": "^3.6.5", "vue": "^2.6.11", + "vue-axios": "^3.4.1", "vue-router": "^3.2.0" }, "devDependencies": { diff --git a/public/index.html b/public/index.html index 3e5a139..66a3dc7 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,20 @@ <%= htmlWebpackPlugin.options.title %> +
+ diff --git a/public/js/flexible.js b/public/js/flexible.js new file mode 100644 index 0000000..073e4c7 --- /dev/null +++ b/public/js/flexible.js @@ -0,0 +1,49 @@ +//designWidth:设计稿的实际宽度值，需要根据实际设置 +//maxWidth:制作稿的最大宽度值，需要根据实际设置 +//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) +;(function(designWidth, maxWidth) { + var doc = document, + win = window, + docEl = doc.documentElement, + remStyle = document.createElement("style"), + tid; + //浏览器竖屏与横屏转换的BUG。 + function refreshRem() { + var width = docEl.getBoundingClientRect().width; + maxWidth = maxWidth || 540; + width>maxWidth && (width=maxWidth); + var rem = width * 100 / designWidth; + remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; + } + + if (docEl.firstElementChild) { + docEl.firstElementChild.appendChild(remStyle); + } else { + var wrap = doc.createElement("div"); + wrap.appendChild(remStyle); + doc.write(wrap.innerHTML); + wrap = null; + } + //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次； + refreshRem(); + + win.addEventListener("resize", function() { + clearTimeout(tid); //防止执行两次 + tid = setTimeout(refreshRem, 300); + }, false); + + win.addEventListener("pageshow", function(e) { + if (e.persisted) { // 浏览器后退的时候重新计算 + clearTimeout(tid); + tid = setTimeout(refreshRem, 300); + } + }, false); + + if (doc.readyState === "complete") { + doc.body.style.fontSize = "16px"; + } else { + doc.addEventListener("DOMContentLoaded", function(e) { + doc.body.style.fontSize = "16px"; + }, false); + } +})(750, 1024); diff --git a/src/App.vue b/src/App.vue index 57b837f..34cf55c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,9 +5,86 @@