lxl-vue2pc 1.0.0

package/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <div v-bind:style="styleObject" class="scale-box">
+      <slot></slot>
+    </div>
+  </template>
+  
+  <script>
+  import debounce from "lodash.debounce"
+  export default {
+    props: {
+      width: {
+        type: Number,
+        default: document.documentElement.clientWidth,
+      },
+      height: {
+        type: document.documentElement.clientHeight,
+        default: 1080,
+      },
+    },
+    components: {},
+    data() {
+      return {
+        scale: this.getScale(),
+      }
+    },
+    computed: {
+      styleObject(){
+        let obj = {
+          transform: `scale(${this.scale}) translate(-50%, -50%)`,
+          WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
+          width: this.width + "px",
+          height: this.height + "px",
+        }
+         return obj
+      }
+  
+    },
+    mounted() {
+      this.getScale()
+      window.addEventListener("resize", this.setScale)
+    },
+    methods: {
+      getScale() {
+        // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
+        console.log(window.innerWidth,'window.innerWidth');
+        let ww = window.innerWidth / this.width
+        let wh = window.innerHeight / this.height
+        return ww < wh ? ww : wh
+      },
+  
+      setScale: debounce(function () {
+        // 获取到缩放比，设置它
+        let scale = this.getScale()
+        this.scale = scale
+         console.log(this.scale, "---")
+      }, 500),
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", this.setScale)
+    },
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  .scale-box {
+    transform-origin: 0 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transition: 0.3s;
+    transform: translate(-50%, -50%);
+  }
+  </style>

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "lxl-vue2pc",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.vue",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "lodash.debounce": "^4.0.8"
+  }
+}