normal

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Larry Zhu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

autofit.js

@@ -0,0 +1,28 @@
+const autofit = {
+  init(options) {
+    let designWidth = options?.designWidth || 1920;
+    let designHeight = options?.designHeight || 929;
+    let renderDom = options?.renderDom || "#app";
+    let resize = options?.resize || true;
+    keepScale(designWidth, designHeight, renderDom);
+    resize && (window.onresize = () => {
+      keepScale(designWidth, designHeight, renderDom);
+    })
+  }
+}
+function keepScale(designWidth, designHeight, renderDom) {
+  let clientHeight = document.documentElement.clientHeight;
+  let clientWidth = document.documentElement.clientWidth;
+  document.querySelector(renderDom).style.height = `${designHeight}px`;
+  document.querySelector(renderDom).style.width = `${designWidth}px`;
+  let scale = 1;
+  if (clientWidth / clientHeight < designWidth / designHeight) {
+    scale = (clientWidth / designWidth)
+    document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
+  } else {
+    scale = (clientHeight / designHeight)
+    document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
+  }
+  document.querySelector(renderDom).style.transform = `scale(${scale})`;
+}
+export default autofit;

index.d.ts

@@ -0,0 +1,17 @@
+declare interface autofit {
+  /**
+   * 参数列表
+   * 对象：
+   * 
+   * @param {Object} options 
+   * - 传入对象，对象中的属性如下：
+   * - renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器 
+   * - designWidth（可选）：设计稿的宽度，默认是 1920 
+   * - designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
+   * - resize（可选）：是否监听resize事件，默认是 true
+  */
+  init(options: { renderDom: String, designWidth: Number, designHeight: Number }): void;
+}
+declare const autofit: autofit;
+
+export default autofit;

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vue-autofit",
+  "version": "1.0.1",
+  "description": "一款自适应屏幕工具，自动缩放且铺满整屏，适用范围3840-768",
+  "main": "autofit.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/995231030/vue-autofit.git"
+  },
+  "keywords": [
+    "自适应",
+    "大屏",
+    "autofit",
+    "auto-fit",
+    "vue-autofit",
+    "fit",
+    "vue-fit",
+    "vue-fit-next"
+  ],
+  "author": "Larry Zhu",
+  "license": "MIT"
+}

readme.md

@@ -0,0 +1,41 @@
+### vue-autofit
+
+这是一款可以使你的项目一键自适应的工具
+
+### 引入
+
+```js
+import autofit from 'vue-autofit'
+```
+
+### 快速开始
+
+```js
+autofit.init()
+```
+
+> 默认参数为1920*929（即去掉浏览器头的1080）, 直接调用即可
+
+### 使用
+
+```js
+export default {  
+  mounted() {
+	autofit.init({
+        designHeight: 1080,
+        designWidth: 1920,
+        renderDom:"#app",
+        resize: true
+    })
+  },
+}
+```
+
+> 以上使用的是默认参数，可根据实际情况调整，参数分别为
+>
+> ```js
+>    * - renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器 
+>    * - designWidth（可选）：设计稿的宽度，默认是 1920 
+>    * - designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
+>    * - resize（可选）：是否监听resize事件，默认是 true
+> ```