├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── babel.config.js
├── dist
    ├── demo.html
    ├── vue2ScaleBox.common.js
    ├── vue2ScaleBox.umd.js
    └── vue2ScaleBox.umd.min.js
├── examples
    ├── App.vue
    ├── App1.vue
    ├── components
    │   └── mapCpn.vue
    └── main.js
├── jsconfig.json
├── lib
    └── index.vue
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | package-lock.json
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | 
2 | # 忽略目录
3 | node_modules/
4 | examples/
5 |  
6 | # 忽略指定文件
7 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-scale-box
 2 | 
 3 | [![npm version](https://img.shields.io/npm/v/vue2-scale-box.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/vue2-scale-box)
 4 | [![npm downloads](https://img.shields.io/npm/dt/vue2-scale-box.svg?style=flat-square)](https://www.npmjs.com/package/vue2-scale-box)
 5 | 
 6 | vue2大屏适配缩放组件
 7 | 
 8 | vue3版本：[https://www.npmjs.com/package/vue3-scale-box](https://www.npmjs.com/package/vue3-scale-box)
 9 | 
10 | ## 安装
11 | ```bash
12 | npm install vue2-scale-box
13 | or
14 | yarn add vue2-scale-box
15 | ```
16 | 
17 | ## 使用
18 | ```html
19 | <template>
20 |   <div id="app">
21 |     <ScaleBox
22 |       :width="1920"
23 |       :height="1080"
24 |       bgc="transparent"
25 |       :delay="100"
26 |       :isFlat="false"
27 |     >
28 |       <template>
29 |         <h1>大屏内容</h1>
30 |       </template>
31 |     </ScaleBox>
32 |   </div>
33 | </template>
34 | ```
35 | 
36 | ``` javascript
37 | import ScaleBox from 'vue2-scale-box'
38 | 
39 | export default {
40 |   components: {
41 |     ScaleBox
42 |   }
43 | }
44 | ```
45 | 
46 | ## 属性
47 | - ` width ` 宽度 默认 ` 1920 `
48 | - ` height ` 高度 默认 ` 1080 `
49 | - ` bgc ` 背景颜色 默认 ` "transparent" `
50 | - ` delay `自适应缩放防抖延迟时间（ms） 默认 ` 100 `
51 | - ` isFlat `是否启用拉伸模式 默认 ` false `
52 | - ` @scaleChange `  缩放值发生改变的方法 可动态获取 scale 改变后的值  注意：拉伸模式下scale值为： ` [x缩放值, y缩放值] `；非拉伸模式下scale值为：` 等比缩放值 `
53 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/dist/demo.html:
--------------------------------------------------------------------------------
1 | <!doctype html><meta charset="utf-8"><title>vue2ScaleBox demo</title><script src="//unpkg.com/vue@2"></script><script src="./vue2ScaleBox.umd.js"></script><link rel="stylesheet" href="./vue2ScaleBox.css"><div id="app"><demo></demo></div><script>new Vue({
2 |   components: {
3 |     demo: vue2ScaleBox
4 |   }
5 | }).$mount('#app')</script>


--------------------------------------------------------------------------------
/dist/vue2ScaleBox.common.js:
--------------------------------------------------------------------------------
  1 | /******/ (function() { // webpackBootstrap
  2 | /******/ 	"use strict";
  3 | /******/ 	// The require scope
  4 | /******/ 	var __webpack_require__ = {};
  5 | /******/ 	
  6 | /************************************************************************/
  7 | /******/ 	/* webpack/runtime/define property getters */
  8 | /******/ 	!function() {
  9 | /******/ 		// define getter functions for harmony exports
 10 | /******/ 		__webpack_require__.d = function(exports, definition) {
 11 | /******/ 			for(var key in definition) {
 12 | /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 13 | /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 14 | /******/ 				}
 15 | /******/ 			}
 16 | /******/ 		};
 17 | /******/ 	}();
 18 | /******/ 	
 19 | /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 20 | /******/ 	!function() {
 21 | /******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
 22 | /******/ 	}();
 23 | /******/ 	
 24 | /******/ 	/* webpack/runtime/publicPath */
 25 | /******/ 	!function() {
 26 | /******/ 		__webpack_require__.p = "";
 27 | /******/ 	}();
 28 | /******/ 	
 29 | /************************************************************************/
 30 | var __webpack_exports__ = {};
 31 | 
 32 | // EXPORTS
 33 | __webpack_require__.d(__webpack_exports__, {
 34 |   "default": function() { return /* binding */ entry_lib; }
 35 | });
 36 | 
 37 | ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 38 | /* eslint-disable no-var */
 39 | // This file is imported into lib/wc client bundles.
 40 | 
 41 | if (typeof window !== 'undefined') {
 42 |   var currentScript = window.document.currentScript
 43 |   if (false) { var getCurrentScript; }
 44 | 
 45 |   var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
 46 |   if (src) {
 47 |     __webpack_require__.p = src[1] // eslint-disable-line
 48 |   }
 49 | }
 50 | 
 51 | // Indicate to webpack that this file can be concatenated
 52 | /* harmony default export */ var setPublicPath = (null);
 53 | 
 54 | ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./lib/index.vue?vue&type=template&id=efd47572&
 55 | var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:"vue2ScaleBox",staticClass:"vue2-scale-box",style:({
 56 |     ..._vm.style,
 57 |     width: _vm.width + 'px',
 58 |     height: _vm.height + 'px',
 59 |     backgroundColor: _vm.bgc,
 60 |   })},[_vm._t("default")],2)
 61 | }
 62 | var staticRenderFns = []
 63 | 
 64 | 
 65 | ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./lib/index.vue?vue&type=script&lang=js&
 66 | 
 67 | /**
 68 |  * width        宽
 69 |  * height       高
 70 |  * bgc          背景颜色
 71 |  * delay        自适应缩放防抖延迟时间（ms）
 72 |  * isFlat       是否启用拉伸模式
 73 |  * @scaleChange 缩放值发生改变的方法 可动态获取 scale 改变后的值
 74 |  */
 75 | /* harmony default export */ var lib_vue_loader_options_libvue_type_script_lang_js_ = ({
 76 |   name: "Vue2ScaleBox",
 77 |   props: {
 78 |     width: {
 79 |       type: Number,
 80 |       default: 1920,
 81 |     },
 82 |     height: {
 83 |       type: Number,
 84 |       default: 1080,
 85 |     },
 86 |     bgc: {
 87 |       type: String,
 88 |       default: "transparent",
 89 |     },
 90 |     delay: {
 91 |       type: Number,
 92 |       default: 100,
 93 |     },
 94 |     isFlat: {
 95 |       type: Boolean,
 96 |       default: false,
 97 |     },
 98 |   },
 99 |   data() {
100 |     return {
101 |       scale: 0,
102 |       scaleX: 0,
103 |       scaleY: 0,
104 |       style: {
105 |         position: "fixed",
106 |         transform: "scale(var(--scale)) translate(-50%, -50%)",
107 |         transformOrigin: "0 0",
108 |         left: "50%",
109 |         top: "50%",
110 |         zIndex: 999,
111 |       },
112 |     };
113 |   },
114 |   created() {
115 |     if (this.isFlat) {
116 |       // 拉伸模式
117 |       this.style["transform"] =
118 |         "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
119 |     } else {
120 |       // 等比缩放模式
121 |       this.style["transform"] = "scale(var(--scale)) translate(-50%, -50%)";
122 |     }
123 |   },
124 |   watch: {
125 |     scale: {
126 |       handler(scale) {
127 |         let args;
128 |         if (this.isFlat) {
129 |           args = [this.scaleX, this.scaleY];
130 |         } else {
131 |           args = scale;
132 |         }
133 |         this.$emit("scaleChange", args);
134 |       },
135 |       immediate: true,
136 |     },
137 |   },
138 |   mounted() {
139 |     this.setScale();
140 |     window.addEventListener("resize", this.debounce(this.setScale));
141 |   },
142 |   methods: {
143 |     getScale() {
144 |       const { width, height } = this;
145 |       const wh = window.innerHeight / height;
146 |       const ww = window.innerWidth / width;
147 |       return ww < wh ? ww : wh;
148 |     },
149 |     getScaleX() {
150 |       const ww = window.innerWidth / this.width;
151 |       return ww;
152 |     },
153 |     getScaleY() {
154 |       const wh = window.innerHeight / this.height;
155 |       return wh;
156 |     },
157 |     setScale() {
158 |       this.scale = this.getScale();
159 |       if (this.$refs.vue2ScaleBox) {
160 |         if (this.isFlat) {
161 |           // 拉伸模式
162 |           this.scaleX = this.getScaleX();
163 |           this.scaleY = this.getScaleY();
164 |           this.$refs.vue2ScaleBox.style.setProperty("--scaleX", this.scaleX);
165 |           this.$refs.vue2ScaleBox.style.setProperty("--scaleY", this.scaleY);
166 |         } else {
167 |           // 等比缩放模式
168 |           this.scale = this.getScale();
169 |           this.$refs.vue2ScaleBox.style.setProperty("--scale", this.scale);
170 |         }
171 |       }
172 |     },
173 |     debounce(fn, delay) {
174 |       const delays = delay || this.delay;
175 |       let timer;
176 |       return function () {
177 |         const th = this;
178 |         const args = arguments;
179 |         if (timer) {
180 |           clearTimeout(timer);
181 |         }
182 |         timer = setTimeout(function () {
183 |           timer = null;
184 |           fn.apply(th, args);
185 |         }, delays);
186 |       };
187 |     },
188 |   },
189 | });
190 | 
191 | ;// CONCATENATED MODULE: ./lib/index.vue?vue&type=script&lang=js&
192 |  /* harmony default export */ var libvue_type_script_lang_js_ = (lib_vue_loader_options_libvue_type_script_lang_js_); 
193 | ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
194 | /* globals __VUE_SSR_CONTEXT__ */
195 | 
196 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
197 | // This module is a runtime utility for cleaner component module output and will
198 | // be included in the final webpack user bundle.
199 | 
200 | function normalizeComponent(
201 |   scriptExports,
202 |   render,
203 |   staticRenderFns,
204 |   functionalTemplate,
205 |   injectStyles,
206 |   scopeId,
207 |   moduleIdentifier /* server only */,
208 |   shadowMode /* vue-cli only */
209 | ) {
210 |   // Vue.extend constructor export interop
211 |   var options =
212 |     typeof scriptExports === 'function' ? scriptExports.options : scriptExports
213 | 
214 |   // render functions
215 |   if (render) {
216 |     options.render = render
217 |     options.staticRenderFns = staticRenderFns
218 |     options._compiled = true
219 |   }
220 | 
221 |   // functional template
222 |   if (functionalTemplate) {
223 |     options.functional = true
224 |   }
225 | 
226 |   // scopedId
227 |   if (scopeId) {
228 |     options._scopeId = 'data-v-' + scopeId
229 |   }
230 | 
231 |   var hook
232 |   if (moduleIdentifier) {
233 |     // server build
234 |     hook = function (context) {
235 |       // 2.3 injection
236 |       context =
237 |         context || // cached call
238 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
239 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
240 |       // 2.2 with runInNewContext: true
241 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
242 |         context = __VUE_SSR_CONTEXT__
243 |       }
244 |       // inject component styles
245 |       if (injectStyles) {
246 |         injectStyles.call(this, context)
247 |       }
248 |       // register component module identifier for async chunk inferrence
249 |       if (context && context._registeredComponents) {
250 |         context._registeredComponents.add(moduleIdentifier)
251 |       }
252 |     }
253 |     // used by ssr in case component is cached and beforeCreate
254 |     // never gets called
255 |     options._ssrRegister = hook
256 |   } else if (injectStyles) {
257 |     hook = shadowMode
258 |       ? function () {
259 |           injectStyles.call(
260 |             this,
261 |             (options.functional ? this.parent : this).$root.$options.shadowRoot
262 |           )
263 |         }
264 |       : injectStyles
265 |   }
266 | 
267 |   if (hook) {
268 |     if (options.functional) {
269 |       // for template-only hot-reload because in that case the render fn doesn't
270 |       // go through the normalizer
271 |       options._injectStyles = hook
272 |       // register for functional component in vue file
273 |       var originalRender = options.render
274 |       options.render = function renderWithStyleInjection(h, context) {
275 |         hook.call(context)
276 |         return originalRender(h, context)
277 |       }
278 |     } else {
279 |       // inject component registration as beforeCreate hook
280 |       var existing = options.beforeCreate
281 |       options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
282 |     }
283 |   }
284 | 
285 |   return {
286 |     exports: scriptExports,
287 |     options: options
288 |   }
289 | }
290 | 
291 | ;// CONCATENATED MODULE: ./lib/index.vue
292 | 
293 | 
294 | 
295 | 
296 | 
297 | /* normalize component */
298 | ;
299 | var component = normalizeComponent(
300 |   libvue_type_script_lang_js_,
301 |   render,
302 |   staticRenderFns,
303 |   false,
304 |   null,
305 |   null,
306 |   null
307 |   
308 | )
309 | 
310 | /* harmony default export */ var lib = (component.exports);
311 | ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
312 | 
313 | 
314 | /* harmony default export */ var entry_lib = (lib);
315 | 
316 | 
317 | module.exports = __webpack_exports__["default"];
318 | /******/ })()
319 | ;


--------------------------------------------------------------------------------
/dist/vue2ScaleBox.umd.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["vue2ScaleBox"] = factory();
  8 | 	else
  9 | 		root["vue2ScaleBox"] = factory();
 10 | })((typeof self !== 'undefined' ? self : this), function() {
 11 | return /******/ (function() { // webpackBootstrap
 12 | /******/ 	"use strict";
 13 | /******/ 	// The require scope
 14 | /******/ 	var __webpack_require__ = {};
 15 | /******/ 	
 16 | /************************************************************************/
 17 | /******/ 	/* webpack/runtime/define property getters */
 18 | /******/ 	!function() {
 19 | /******/ 		// define getter functions for harmony exports
 20 | /******/ 		__webpack_require__.d = function(exports, definition) {
 21 | /******/ 			for(var key in definition) {
 22 | /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 23 | /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 24 | /******/ 				}
 25 | /******/ 			}
 26 | /******/ 		};
 27 | /******/ 	}();
 28 | /******/ 	
 29 | /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 30 | /******/ 	!function() {
 31 | /******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
 32 | /******/ 	}();
 33 | /******/ 	
 34 | /******/ 	/* webpack/runtime/publicPath */
 35 | /******/ 	!function() {
 36 | /******/ 		__webpack_require__.p = "";
 37 | /******/ 	}();
 38 | /******/ 	
 39 | /************************************************************************/
 40 | var __webpack_exports__ = {};
 41 | 
 42 | // EXPORTS
 43 | __webpack_require__.d(__webpack_exports__, {
 44 |   "default": function() { return /* binding */ entry_lib; }
 45 | });
 46 | 
 47 | ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 48 | /* eslint-disable no-var */
 49 | // This file is imported into lib/wc client bundles.
 50 | 
 51 | if (typeof window !== 'undefined') {
 52 |   var currentScript = window.document.currentScript
 53 |   if (false) { var getCurrentScript; }
 54 | 
 55 |   var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
 56 |   if (src) {
 57 |     __webpack_require__.p = src[1] // eslint-disable-line
 58 |   }
 59 | }
 60 | 
 61 | // Indicate to webpack that this file can be concatenated
 62 | /* harmony default export */ var setPublicPath = (null);
 63 | 
 64 | ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./lib/index.vue?vue&type=template&id=efd47572&
 65 | var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:"vue2ScaleBox",staticClass:"vue2-scale-box",style:({
 66 |     ..._vm.style,
 67 |     width: _vm.width + 'px',
 68 |     height: _vm.height + 'px',
 69 |     backgroundColor: _vm.bgc,
 70 |   })},[_vm._t("default")],2)
 71 | }
 72 | var staticRenderFns = []
 73 | 
 74 | 
 75 | ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./lib/index.vue?vue&type=script&lang=js&
 76 | 
 77 | /**
 78 |  * width        宽
 79 |  * height       高
 80 |  * bgc          背景颜色
 81 |  * delay        自适应缩放防抖延迟时间（ms）
 82 |  * isFlat       是否启用拉伸模式
 83 |  * @scaleChange 缩放值发生改变的方法 可动态获取 scale 改变后的值
 84 |  */
 85 | /* harmony default export */ var lib_vue_loader_options_libvue_type_script_lang_js_ = ({
 86 |   name: "Vue2ScaleBox",
 87 |   props: {
 88 |     width: {
 89 |       type: Number,
 90 |       default: 1920,
 91 |     },
 92 |     height: {
 93 |       type: Number,
 94 |       default: 1080,
 95 |     },
 96 |     bgc: {
 97 |       type: String,
 98 |       default: "transparent",
 99 |     },
100 |     delay: {
101 |       type: Number,
102 |       default: 100,
103 |     },
104 |     isFlat: {
105 |       type: Boolean,
106 |       default: false,
107 |     },
108 |   },
109 |   data() {
110 |     return {
111 |       scale: 0,
112 |       scaleX: 0,
113 |       scaleY: 0,
114 |       style: {
115 |         position: "fixed",
116 |         transform: "scale(var(--scale)) translate(-50%, -50%)",
117 |         transformOrigin: "0 0",
118 |         left: "50%",
119 |         top: "50%",
120 |         zIndex: 999,
121 |       },
122 |     };
123 |   },
124 |   created() {
125 |     if (this.isFlat) {
126 |       // 拉伸模式
127 |       this.style["transform"] =
128 |         "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
129 |     } else {
130 |       // 等比缩放模式
131 |       this.style["transform"] = "scale(var(--scale)) translate(-50%, -50%)";
132 |     }
133 |   },
134 |   watch: {
135 |     scale: {
136 |       handler(scale) {
137 |         let args;
138 |         if (this.isFlat) {
139 |           args = [this.scaleX, this.scaleY];
140 |         } else {
141 |           args = scale;
142 |         }
143 |         this.$emit("scaleChange", args);
144 |       },
145 |       immediate: true,
146 |     },
147 |   },
148 |   mounted() {
149 |     this.setScale();
150 |     window.addEventListener("resize", this.debounce(this.setScale));
151 |   },
152 |   methods: {
153 |     getScale() {
154 |       const { width, height } = this;
155 |       const wh = window.innerHeight / height;
156 |       const ww = window.innerWidth / width;
157 |       return ww < wh ? ww : wh;
158 |     },
159 |     getScaleX() {
160 |       const ww = window.innerWidth / this.width;
161 |       return ww;
162 |     },
163 |     getScaleY() {
164 |       const wh = window.innerHeight / this.height;
165 |       return wh;
166 |     },
167 |     setScale() {
168 |       this.scale = this.getScale();
169 |       if (this.$refs.vue2ScaleBox) {
170 |         if (this.isFlat) {
171 |           // 拉伸模式
172 |           this.scaleX = this.getScaleX();
173 |           this.scaleY = this.getScaleY();
174 |           this.$refs.vue2ScaleBox.style.setProperty("--scaleX", this.scaleX);
175 |           this.$refs.vue2ScaleBox.style.setProperty("--scaleY", this.scaleY);
176 |         } else {
177 |           // 等比缩放模式
178 |           this.scale = this.getScale();
179 |           this.$refs.vue2ScaleBox.style.setProperty("--scale", this.scale);
180 |         }
181 |       }
182 |     },
183 |     debounce(fn, delay) {
184 |       const delays = delay || this.delay;
185 |       let timer;
186 |       return function () {
187 |         const th = this;
188 |         const args = arguments;
189 |         if (timer) {
190 |           clearTimeout(timer);
191 |         }
192 |         timer = setTimeout(function () {
193 |           timer = null;
194 |           fn.apply(th, args);
195 |         }, delays);
196 |       };
197 |     },
198 |   },
199 | });
200 | 
201 | ;// CONCATENATED MODULE: ./lib/index.vue?vue&type=script&lang=js&
202 |  /* harmony default export */ var libvue_type_script_lang_js_ = (lib_vue_loader_options_libvue_type_script_lang_js_); 
203 | ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
204 | /* globals __VUE_SSR_CONTEXT__ */
205 | 
206 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
207 | // This module is a runtime utility for cleaner component module output and will
208 | // be included in the final webpack user bundle.
209 | 
210 | function normalizeComponent(
211 |   scriptExports,
212 |   render,
213 |   staticRenderFns,
214 |   functionalTemplate,
215 |   injectStyles,
216 |   scopeId,
217 |   moduleIdentifier /* server only */,
218 |   shadowMode /* vue-cli only */
219 | ) {
220 |   // Vue.extend constructor export interop
221 |   var options =
222 |     typeof scriptExports === 'function' ? scriptExports.options : scriptExports
223 | 
224 |   // render functions
225 |   if (render) {
226 |     options.render = render
227 |     options.staticRenderFns = staticRenderFns
228 |     options._compiled = true
229 |   }
230 | 
231 |   // functional template
232 |   if (functionalTemplate) {
233 |     options.functional = true
234 |   }
235 | 
236 |   // scopedId
237 |   if (scopeId) {
238 |     options._scopeId = 'data-v-' + scopeId
239 |   }
240 | 
241 |   var hook
242 |   if (moduleIdentifier) {
243 |     // server build
244 |     hook = function (context) {
245 |       // 2.3 injection
246 |       context =
247 |         context || // cached call
248 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
249 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
250 |       // 2.2 with runInNewContext: true
251 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
252 |         context = __VUE_SSR_CONTEXT__
253 |       }
254 |       // inject component styles
255 |       if (injectStyles) {
256 |         injectStyles.call(this, context)
257 |       }
258 |       // register component module identifier for async chunk inferrence
259 |       if (context && context._registeredComponents) {
260 |         context._registeredComponents.add(moduleIdentifier)
261 |       }
262 |     }
263 |     // used by ssr in case component is cached and beforeCreate
264 |     // never gets called
265 |     options._ssrRegister = hook
266 |   } else if (injectStyles) {
267 |     hook = shadowMode
268 |       ? function () {
269 |           injectStyles.call(
270 |             this,
271 |             (options.functional ? this.parent : this).$root.$options.shadowRoot
272 |           )
273 |         }
274 |       : injectStyles
275 |   }
276 | 
277 |   if (hook) {
278 |     if (options.functional) {
279 |       // for template-only hot-reload because in that case the render fn doesn't
280 |       // go through the normalizer
281 |       options._injectStyles = hook
282 |       // register for functional component in vue file
283 |       var originalRender = options.render
284 |       options.render = function renderWithStyleInjection(h, context) {
285 |         hook.call(context)
286 |         return originalRender(h, context)
287 |       }
288 |     } else {
289 |       // inject component registration as beforeCreate hook
290 |       var existing = options.beforeCreate
291 |       options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
292 |     }
293 |   }
294 | 
295 |   return {
296 |     exports: scriptExports,
297 |     options: options
298 |   }
299 | }
300 | 
301 | ;// CONCATENATED MODULE: ./lib/index.vue
302 | 
303 | 
304 | 
305 | 
306 | 
307 | /* normalize component */
308 | ;
309 | var component = normalizeComponent(
310 |   libvue_type_script_lang_js_,
311 |   render,
312 |   staticRenderFns,
313 |   false,
314 |   null,
315 |   null,
316 |   null
317 |   
318 | )
319 | 
320 | /* harmony default export */ var lib = (component.exports);
321 | ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
322 | 
323 | 
324 | /* harmony default export */ var entry_lib = (lib);
325 | 
326 | 
327 | __webpack_exports__ = __webpack_exports__["default"];
328 | /******/ 	return __webpack_exports__;
329 | /******/ })()
330 | ;
331 | });


--------------------------------------------------------------------------------
/dist/vue2ScaleBox.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue2ScaleBox"]=t():e["vue2ScaleBox"]=t()})("undefined"!==typeof self?self:this,(function(){return function(){"use strict";var e={};!function(){e.d=function(t,s){for(var n in s)e.o(s,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:s[n]})}}(),function(){e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){e.p=""}();var t={};if(e.d(t,{default:function(){return d}}),"undefined"!==typeof window){var s=window.document.currentScript,n=s&&s.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);n&&(e.p=n[1])}var i=function(){var e=this,t=e._self._c;return t("div",{ref:"vue2ScaleBox",staticClass:"vue2-scale-box",style:{...e.style,width:e.width+"px",height:e.height+"px",backgroundColor:e.bgc}},[e._t("default")],2)},a=[],r={name:"Vue2ScaleBox",props:{width:{type:Number,default:1920},height:{type:Number,default:1080},bgc:{type:String,default:"transparent"},delay:{type:Number,default:100},isFlat:{type:Boolean,default:!1}},data(){return{scale:0,scaleX:0,scaleY:0,style:{position:"fixed",transform:"scale(var(--scale)) translate(-50%, -50%)",transformOrigin:"0 0",left:"50%",top:"50%",zIndex:999}}},created(){this.isFlat?this.style["transform"]="scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)":this.style["transform"]="scale(var(--scale)) translate(-50%, -50%)"},watch:{scale:{handler(e){let t;t=this.isFlat?[this.scaleX,this.scaleY]:e,this.$emit("scaleChange",t)},immediate:!0}},mounted(){this.setScale(),window.addEventListener("resize",this.debounce(this.setScale))},methods:{getScale(){const{width:e,height:t}=this,s=window.innerHeight/t,n=window.innerWidth/e;return n<s?n:s},getScaleX(){const e=window.innerWidth/this.width;return e},getScaleY(){const e=window.innerHeight/this.height;return e},setScale(){this.scale=this.getScale(),this.$refs.vue2ScaleBox&&(this.isFlat?(this.scaleX=this.getScaleX(),this.scaleY=this.getScaleY(),this.$refs.vue2ScaleBox.style.setProperty("--scaleX",this.scaleX),this.$refs.vue2ScaleBox.style.setProperty("--scaleY",this.scaleY)):(this.scale=this.getScale(),this.$refs.vue2ScaleBox.style.setProperty("--scale",this.scale)))},debounce(e,t){const s=t||this.delay;let n;return function(){const t=this,i=arguments;n&&clearTimeout(n),n=setTimeout((function(){n=null,e.apply(t,i)}),s)}}}},o=r;function l(e,t,s,n,i,a,r,o){var l,c="function"===typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=s,c._compiled=!0),n&&(c.functional=!0),a&&(c._scopeId="data-v-"+a),r?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=l):i&&(l=o?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(e,t){return l.call(t),u(e,t)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:c}}var c=l(o,i,a,!1,null,null,null),u=c.exports,d=u;return t=t["default"],t}()}));


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <ScaleBox ref="scaleBox" :width="1920" :height="1080" bgc="rgba(4, 53, 114, 0.6)" :delay="100" :isFlat="false" @scaleChange="scaleChange">
 4 |       <template>
 5 |         <!-- 缩放导致地图上偏移 解决方案 -->
 6 |         <div class="map-box">
 7 |           <MapCpn :style="{ transform: `scale(${scale})` }" />
 8 |         </div>
 9 |       </template>
10 |     </ScaleBox>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import ScaleBox from "../lib/index.vue";
16 | import MapCpn from "./components/mapCpn.vue";
17 | 
18 | export default {
19 |   name: "App",
20 |   data() {
21 |     return {
22 |       scale: 1,
23 |     };
24 |   },
25 |   components: {
26 |     ScaleBox,
27 |     MapCpn,
28 |   },
29 |   methods: {
30 |     scaleChange(scale) {
31 |       /*
32 |         默认为关闭拉伸模式(等比缩放模式)
33 |         开启拉伸模式(isFlat = true) scaleVal = [x缩放值, y缩放值]
34 |         关闭拉伸模式(isFlat = false) scaleVal = 等比缩放值
35 |       */
36 |       // 缩放导致地图上偏移 解决方案
37 |       this.scale = 1 / scale;
38 |     },
39 |   },
40 | };
41 | </script>
42 | 
43 | <style>
44 | * {
45 |   padding: 0;
46 |   margin: 0;
47 | }
48 | .map-box {
49 |   width: 1200px;
50 |   height: 600px;
51 |   margin: 0 auto;
52 |   margin-top: 200px;
53 |   overflow: hidden;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/examples/App1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Vue2ScaleBox :width="1920" :height="1080" :delay="100">
  4 |       <template>
  5 |         <div class="ec-demo" id="ec-demo"></div>
  6 |       </template>
  7 |     </Vue2ScaleBox>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import * as echarts from "echarts";
 13 | import rocTooltipShow from "roc-tooltip-show";
 14 | import Vue2ScaleBox from "../lib/index.vue";
 15 | export default {
 16 |   name: "App",
 17 |   components: {
 18 |     Vue2ScaleBox,
 19 |   },
 20 |   mounted() {
 21 |     this.chartRender();
 22 |   },
 23 |   methods: {
 24 |     chartRender() {
 25 |       var chartDom = document.getElementById("ec-demo");
 26 |       var myChart = echarts.init(chartDom);
 27 |       var option;
 28 | 
 29 |       option = {
 30 |         color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
 31 |         title: {
 32 |           text: "大屏适配方案示例",
 33 |           textStyle: {
 34 |             color: "#fff",
 35 |           },
 36 |         },
 37 |         tooltip: {
 38 |           trigger: "axis",
 39 |           axisPointer: {
 40 |             type: "cross",
 41 |             label: {
 42 |               backgroundColor: "#6a7985",
 43 |             },
 44 |           },
 45 |         },
 46 |         legend: {
 47 |           data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
 48 |           textStyle: {
 49 |             color: "#fff",
 50 |           },
 51 |         },
 52 |         toolbox: {
 53 |           feature: {
 54 |             saveAsImage: {},
 55 |           },
 56 |         },
 57 |         grid: {
 58 |           left: "3%",
 59 |           right: "4%",
 60 |           bottom: "3%",
 61 |           containLabel: true,
 62 |         },
 63 |         xAxis: [
 64 |           {
 65 |             type: "category",
 66 |             boundaryGap: false,
 67 |             data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 68 |           },
 69 |         ],
 70 |         yAxis: [
 71 |           {
 72 |             type: "value",
 73 |           },
 74 |         ],
 75 |         series: [
 76 |           {
 77 |             name: "Line 1",
 78 |             type: "line",
 79 |             stack: "Total",
 80 |             smooth: true,
 81 |             lineStyle: {
 82 |               width: 0,
 83 |             },
 84 |             showSymbol: false,
 85 |             areaStyle: {
 86 |               opacity: 0.8,
 87 |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 88 |                 {
 89 |                   offset: 0,
 90 |                   color: "rgb(128, 255, 165)",
 91 |                 },
 92 |                 {
 93 |                   offset: 1,
 94 |                   color: "rgb(1, 191, 236)",
 95 |                 },
 96 |               ]),
 97 |             },
 98 |             emphasis: {
 99 |               focus: "series",
100 |             },
101 |             data: [140, 232, 101, 264, 90, 340, 250],
102 |           },
103 |           {
104 |             name: "Line 2",
105 |             type: "line",
106 |             stack: "Total",
107 |             smooth: true,
108 |             lineStyle: {
109 |               width: 0,
110 |             },
111 |             showSymbol: false,
112 |             areaStyle: {
113 |               opacity: 0.8,
114 |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
115 |                 {
116 |                   offset: 0,
117 |                   color: "rgb(0, 221, 255)",
118 |                 },
119 |                 {
120 |                   offset: 1,
121 |                   color: "rgb(77, 119, 255)",
122 |                 },
123 |               ]),
124 |             },
125 |             emphasis: {
126 |               focus: "series",
127 |             },
128 |             data: [120, 282, 111, 234, 220, 340, 310],
129 |           },
130 |           {
131 |             name: "Line 3",
132 |             type: "line",
133 |             stack: "Total",
134 |             smooth: true,
135 |             lineStyle: {
136 |               width: 0,
137 |             },
138 |             showSymbol: false,
139 |             areaStyle: {
140 |               opacity: 0.8,
141 |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
142 |                 {
143 |                   offset: 0,
144 |                   color: "rgb(55, 162, 255)",
145 |                 },
146 |                 {
147 |                   offset: 1,
148 |                   color: "rgb(116, 21, 219)",
149 |                 },
150 |               ]),
151 |             },
152 |             emphasis: {
153 |               focus: "series",
154 |             },
155 |             data: [320, 132, 201, 334, 190, 130, 220],
156 |           },
157 |           {
158 |             name: "Line 4",
159 |             type: "line",
160 |             stack: "Total",
161 |             smooth: true,
162 |             lineStyle: {
163 |               width: 0,
164 |             },
165 |             showSymbol: false,
166 |             areaStyle: {
167 |               opacity: 0.8,
168 |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
169 |                 {
170 |                   offset: 0,
171 |                   color: "rgb(255, 0, 135)",
172 |                 },
173 |                 {
174 |                   offset: 1,
175 |                   color: "rgb(135, 0, 157)",
176 |                 },
177 |               ]),
178 |             },
179 |             emphasis: {
180 |               focus: "series",
181 |             },
182 |             data: [220, 402, 231, 134, 190, 230, 120],
183 |           },
184 |           {
185 |             name: "Line 5",
186 |             type: "line",
187 |             stack: "Total",
188 |             smooth: true,
189 |             lineStyle: {
190 |               width: 0,
191 |             },
192 |             showSymbol: false,
193 |             label: {
194 |               show: true,
195 |               position: "top",
196 |             },
197 |             areaStyle: {
198 |               opacity: 0.8,
199 |               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
200 |                 {
201 |                   offset: 0,
202 |                   color: "rgb(255, 191, 0)",
203 |                 },
204 |                 {
205 |                   offset: 1,
206 |                   color: "rgb(224, 62, 76)",
207 |                 },
208 |               ]),
209 |             },
210 |             emphasis: {
211 |               focus: "series",
212 |             },
213 |             data: [220, 302, 181, 234, 210, 290, 150],
214 |           },
215 |         ],
216 |       };
217 | 
218 |       option && myChart.setOption(option);
219 | 
220 |       // tooltip 自动轮播
221 |       rocTooltipShow(myChart, option);
222 |     },
223 |   },
224 | };
225 | </script>
226 | 
227 | <style>
228 | * {
229 |   padding: 0;
230 |   margin: 0;
231 | }
232 | #app {
233 |   width: 100vw;
234 |   height: 100vh;
235 |   background-color: #02234d;
236 |   text-align: center;
237 | }
238 | .ec-demo {
239 |   width: 100%;
240 |   height: 100%;
241 | }
242 | </style>
243 | 


--------------------------------------------------------------------------------
/examples/components/mapCpn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="container"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import AMapLoader from "@amap/amap-jsapi-loader";
 7 | export default {
 8 |   name: "MapCpn",
 9 |   data() {
10 |     return {
11 |       map: "",
12 |     };
13 |   },
14 |   created() {
15 |     // console.log(rocUtils.isNumber(123));
16 |     this.initMap();
17 |   },
18 |   methods: {
19 |     initMap() {
20 |       AMapLoader.load({
21 |         key: "41a92b71c69e8ae6be74dabeda835ede", // 申请好的Web端开发者Key，首次调用 load 时必填
22 |         securityJsCode: "4692ae1c4d15ac61adc56bf545213002",
23 |         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
24 |         plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
25 |       })
26 |         .then((AMap) => {
27 |           this.map = new AMap.Map("container", {
28 |             viewMode: "2D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
29 |             zoom: 11, //初始化地图层级
30 |             center: [116.397428, 39.90923], //初始化地图中心点
31 |           });
32 |         })
33 |         .catch((e) => {
34 |           console.log(e);
35 |         });
36 |     },
37 |   },
38 | };
39 | </script>
40 | 
41 | <style scoped>
42 | #container {
43 |   width: 100%;
44 |   height: 100%;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "examples/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/lib/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="vue2-scale-box"
  4 |     ref="vue2ScaleBox"
  5 |     :style="{
  6 |       ...style,
  7 |       width: width + 'px',
  8 |       height: height + 'px',
  9 |       backgroundColor: bgc,
 10 |     }"
 11 |   >
 12 |     <slot></slot>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | /**
 18 |  * width        宽
 19 |  * height       高
 20 |  * bgc          背景颜色
 21 |  * delay        自适应缩放防抖延迟时间（ms）
 22 |  * isFlat       是否启用拉伸模式
 23 |  * @scaleChange 缩放值发生改变的方法 可动态获取 scale 改变后的值
 24 |  */
 25 | export default {
 26 |   name: "Vue2ScaleBox",
 27 |   props: {
 28 |     width: {
 29 |       type: Number,
 30 |       default: 1920,
 31 |     },
 32 |     height: {
 33 |       type: Number,
 34 |       default: 1080,
 35 |     },
 36 |     bgc: {
 37 |       type: String,
 38 |       default: "transparent",
 39 |     },
 40 |     delay: {
 41 |       type: Number,
 42 |       default: 100,
 43 |     },
 44 |     isFlat: {
 45 |       type: Boolean,
 46 |       default: false,
 47 |     },
 48 |   },
 49 |   data() {
 50 |     return {
 51 |       scale: 0,
 52 |       scaleX: 0,
 53 |       scaleY: 0,
 54 |       style: {
 55 |         position: "fixed",
 56 |         transform: "scale(var(--scale)) translate(-50%, -50%)",
 57 |         transformOrigin: "0 0",
 58 |         left: "50%",
 59 |         top: "50%",
 60 |         zIndex: 999,
 61 |       },
 62 |     };
 63 |   },
 64 |   created() {
 65 |     if (this.isFlat) {
 66 |       // 拉伸模式
 67 |       this.style["transform"] =
 68 |         "scaleX(var(--scaleX)) scaleY(var(--scaleY)) translate(-50%, -50%)";
 69 |     } else {
 70 |       // 等比缩放模式
 71 |       this.style["transform"] = "scale(var(--scale)) translate(-50%, -50%)";
 72 |     }
 73 |   },
 74 |   watch: {
 75 |     scale: {
 76 |       handler(scale) {
 77 |         let args;
 78 |         if (this.isFlat) {
 79 |           args = [this.scaleX, this.scaleY];
 80 |         } else {
 81 |           args = scale;
 82 |         }
 83 |         this.$emit("scaleChange", args);
 84 |       },
 85 |       immediate: true,
 86 |     },
 87 |   },
 88 |   mounted() {
 89 |     this.setScale();
 90 |     window.addEventListener("resize", this.debounce(this.setScale));
 91 |   },
 92 |   methods: {
 93 |     getScale() {
 94 |       const { width, height } = this;
 95 |       const wh = window.innerHeight / height;
 96 |       const ww = window.innerWidth / width;
 97 |       return ww < wh ? ww : wh;
 98 |     },
 99 |     getScaleX() {
100 |       const ww = window.innerWidth / this.width;
101 |       return ww;
102 |     },
103 |     getScaleY() {
104 |       const wh = window.innerHeight / this.height;
105 |       return wh;
106 |     },
107 |     setScale() {
108 |       this.scale = this.getScale();
109 |       if (this.$refs.vue2ScaleBox) {
110 |         if (this.isFlat) {
111 |           // 拉伸模式
112 |           this.scaleX = this.getScaleX();
113 |           this.scaleY = this.getScaleY();
114 |           this.$refs.vue2ScaleBox.style.setProperty("--scaleX", this.scaleX);
115 |           this.$refs.vue2ScaleBox.style.setProperty("--scaleY", this.scaleY);
116 |         } else {
117 |           // 等比缩放模式
118 |           this.scale = this.getScale();
119 |           this.$refs.vue2ScaleBox.style.setProperty("--scale", this.scale);
120 |         }
121 |       }
122 |     },
123 |     debounce(fn, delay) {
124 |       const delays = delay || this.delay;
125 |       let timer;
126 |       return function () {
127 |         const th = this;
128 |         const args = arguments;
129 |         if (timer) {
130 |           clearTimeout(timer);
131 |         }
132 |         timer = setTimeout(function () {
133 |           timer = null;
134 |           fn.apply(th, args);
135 |         }, delays);
136 |       };
137 |     },
138 |   },
139 | };
140 | </script>
141 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue2-scale-box",
 3 |   "version": "0.1.7",
 4 |   "author": "rocyuan",
 5 |   "license": "MIT",
 6 |   "keywords": [
 7 |     "scale",
 8 |     "vue",
 9 |     "component",
10 |     "big screen",
11 |     "rocyuan",
12 |     "roc",
13 |     "rocyuan666"
14 |   ],
15 |   "description": "vue2 scale box",
16 |   "main": "dist/vue2ScaleBox.umd.min.js",
17 |   "scripts": {
18 |     "serve": "vue-cli-service serve",
19 |     "lint": "vue-cli-service lint",
20 |     "lib": "vue-cli-service build --target lib --name vue2ScaleBox --dest dist lib/index.vue"
21 |   },
22 |   "devDependencies": {
23 |     "@amap/amap-jsapi-loader": "^1.0.1",
24 |     "@babel/core": "^7.12.16",
25 |     "@babel/eslint-parser": "^7.12.16",
26 |     "@vue/cli-plugin-babel": "~5.0.0",
27 |     "@vue/cli-plugin-eslint": "~5.0.0",
28 |     "@vue/cli-service": "~5.0.0",
29 |     "core-js": "^3.8.3",
30 |     "echarts": "^5.4.0",
31 |     "eslint": "^7.32.0",
32 |     "eslint-plugin-vue": "^8.0.3",
33 |     "roc-tooltip-show": "^0.1.1",
34 |     "vue": "^2.6.14",
35 |     "vue-template-compiler": "^2.6.14"
36 |   },
37 |   "homepage": "https://github.com/rocyuan666/vue2-scale-box",
38 |   "repository": {
39 |     "type": "git",
40 |     "url": "git+https://github.com/rocyuan666/vue2-scale-box.git"
41 |   },
42 |   "eslintConfig": {
43 |     "root": true,
44 |     "env": {
45 |       "node": true
46 |     },
47 |     "extends": [
48 |       "plugin:vue/essential",
49 |       "eslint:recommended"
50 |     ],
51 |     "parserOptions": {
52 |       "parser": "@babel/eslint-parser"
53 |     },
54 |     "rules": {}
55 |   },
56 |   "browserslist": [
57 |     "> 1%",
58 |     "last 2 versions",
59 |     "not dead"
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocyuan666/vue2-scale-box/27d1c011fc84a86144366595ff47e9abbc26c6df/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('@vue/cli-service')
 2 | 
 3 | module.exports = defineConfig({
 4 |   transpileDependencies: true,
 5 |   productionSourceMap: false,
 6 |   // 配置参考：https://cli.vuejs.org/zh/config/#pages
 7 |   pages: {
 8 |     index: {
 9 |       // 入口
10 |       entry: "examples/main.js",
11 |       // 模板
12 |       template: "public/index.html",
13 |       // 打包输出的html
14 |       filename: "index.html",
15 |     },
16 |   },
17 |   // 配置参考：https://cli.vuejs.org/zh/config/#chainwebpack
18 |   chainWebpack: (config) => {
19 |     config.module
20 |       .rule("js")
21 |       .include.add("/lib")
22 |       .end()
23 |       .use("babel")
24 |       .loader("babel-loader");
25 |   },
26 | });
27 | 


--------------------------------------------------------------------------------