scale-screen.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <!--
  2. * @Author: wei
  3. * @description: 大屏自适应容器组件
  4. * @LastEditTime: 2022-09-09 16:42:40
  5. -->
  6. <template>
  7. <!-- <section class="screen-box" :style="boxStyle"> -->
  8. <div class="screen-wrapper" ref="screenWrapper" :style="wrapperStyle">
  9. <slot></slot>
  10. </div>
  11. <!-- </section> -->
  12. </template>
  13. <script>
  14. /**
  15. * 防抖函数
  16. * @param {T} fn
  17. * @param {number} delay
  18. * @return
  19. */
  20. function debounce(fn, delay) {
  21. let timer = null;
  22. return function (...args) {
  23. timer = setTimeout(
  24. () => {
  25. typeof fn === "function" && fn.apply(null, args);
  26. clearTimeout(timer);
  27. },
  28. delay > 0 ? delay : 100
  29. );
  30. };
  31. }
  32. export default {
  33. name: "VScaleScreen",
  34. props: {
  35. width: {
  36. type: [String, Number],
  37. default: 1920,
  38. },
  39. height: {
  40. type: [String, Number],
  41. default: 1080,
  42. },
  43. fullScreen: {
  44. type: Boolean,
  45. default: false,
  46. },
  47. autoScale: {
  48. type: [Object, Boolean],
  49. default: true,
  50. },
  51. selfAdaption: {
  52. type: Boolean,
  53. default: true,
  54. },
  55. delay: {
  56. type: Number,
  57. default: 500,
  58. },
  59. boxStyle: {
  60. type: Object,
  61. default: () => ({}),
  62. },
  63. wrapperStyle: {
  64. type: Object,
  65. default: () => ({}),
  66. },
  67. },
  68. data() {
  69. return {
  70. currentWidth: 0,
  71. currentHeight: 0,
  72. originalWidth: 0,
  73. originalHeight: 0,
  74. onResize: null,
  75. observer: null,
  76. isInnerPage: false
  77. };
  78. },
  79. watch: {
  80. selfAdaption(val) {
  81. if (val) {
  82. this.resize();
  83. this.addListener();
  84. } else {
  85. this.clearListener();
  86. this.clearStyle();
  87. }
  88. },
  89. },
  90. computed: {
  91. screenWrapper() {
  92. return this.$refs["screenWrapper"];
  93. },
  94. },
  95. methods: {
  96. initSize() {
  97. this.isInnerPage = this.$route.path.indexOf("bigStatistics")>=0
  98. return new Promise((resolve, reject) => {
  99. // console.log("初始化样式");
  100. //给父元素设置 overflow:hidden
  101. this.screenWrapper.parentNode.style.overflow = !this.isInnerPage ? "hidden" : 'auto';
  102. this.screenWrapper.parentNode.scrollLeft = 0;
  103. this.screenWrapper.parentNode.scrollTop = 0;
  104. this.$nextTick(() => {
  105. // region 获取大屏真实尺寸
  106. if (this.width && this.height) {
  107. this.currentWidth = this.width;
  108. this.currentHeight = this.height;
  109. } else {
  110. this.currentWidth = this.screenWrapper.clientWidth;
  111. this.currentHeight = this.screenWrapper.clientHeight;
  112. }
  113. // endregion
  114. // region 获取画布尺寸
  115. if (!this.originalHeight || !this.originalWidth) {
  116. this.originalWidth = window.screen.width;
  117. this.originalHeight = window.screen.height;
  118. }
  119. // endregion
  120. resolve();
  121. });
  122. });
  123. },
  124. updateSize() {
  125. if (this.currentWidth && this.currentHeight) {
  126. this.screenWrapper.style.width = `${this.currentWidth}px`;
  127. this.screenWrapper.style.height = `${this.currentHeight}px`;
  128. } else {
  129. this.screenWrapper.style.width = `${this.originalWidth}px`;
  130. this.screenWrapper.style.height = `${this.originalHeight}px`;
  131. }
  132. },
  133. handleAutoScale(scale) {
  134. if (!this.autoScale) return;
  135. const screenWrapper = this.screenWrapper;
  136. const domWidth = screenWrapper.clientWidth;
  137. const domHeight = screenWrapper.clientHeight;
  138. const currentWidth = !this.isInnerPage ? document.body.clientWidth : screenWrapper.parentNode.clientWidth;
  139. const currentHeight = !this.isInnerPage ? document.body.clientHeight : screenWrapper.parentNode.clientHeight;
  140. screenWrapper.style.transform = `scale(${scale},${scale}) `;
  141. let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
  142. let my = Math.max((currentHeight - domHeight * scale) / 2, 0);
  143. if (typeof this.autoScale === "object") {
  144. // @ts-ignore
  145. !this.autoScale.x && (mx = 0);
  146. // @ts-ignore
  147. !this.autoScale.y && (my = 0);
  148. }
  149. // console.log({
  150. // mx,
  151. // my,
  152. // currentWidth,
  153. // currentHeight,
  154. // domWidth,
  155. // domHeight,
  156. // scale,
  157. // });
  158. this.screenWrapper.style.margin = `${my}px ${mx}px`;
  159. },
  160. updateScale() {
  161. const screenWrapper = this.screenWrapper;
  162. // 获取真实视口尺寸
  163. const currentWidth = !this.isInnerPage ? document.body.clientWidth : screenWrapper.parentNode.clientWidth;
  164. const currentHeight = !this.isInnerPage ? document.body.clientHeight : screenWrapper.parentNode.clientHeight;
  165. // 获取大屏最终的宽高onResize
  166. const realWidth = this.currentWidth || this.originalWidth;
  167. const realHeight = this.currentHeight || this.originalHeight;
  168. // 计算缩放比例
  169. const widthScale = currentWidth / realWidth;
  170. const heightScale = currentHeight / realHeight;
  171. // console.log({currentWidth, currentHeight,realWidth,realHeight});
  172. // 若要铺满全屏,则按照各自比例缩放
  173. if (this.fullScreen) {
  174. screenWrapper.style.transform = `scale(${widthScale},${heightScale})`;
  175. return false;
  176. }
  177. // 按照宽高最小比例进行缩放
  178. const scale = Math.min(widthScale, heightScale);
  179. this.handleAutoScale(scale);
  180. },
  181. initMutationObserver() {
  182. const screenWrapper = this.screenWrapper;
  183. const observer = (this.observer = new MutationObserver(() => {
  184. this.onResize();
  185. }));
  186. observer.observe(screenWrapper, {
  187. attributes: true,
  188. attributeFilter: ["style"],
  189. attributeOldValue: true,
  190. });
  191. },
  192. clearListener() {
  193. window.removeEventListener("resize", this.onResize);
  194. },
  195. addListener() {
  196. window.addEventListener("resize", this.onResize);
  197. },
  198. clearStyle() {
  199. // console.log("清除");
  200. const screenWrapper = this.screenWrapper;
  201. screenWrapper.parentNode.style.overflow = "auto";
  202. screenWrapper.style = "";
  203. },
  204. async resize() {
  205. if (!this.selfAdaption) {
  206. return;
  207. }
  208. await this.initSize();
  209. this.updateSize();
  210. this.updateScale();
  211. },
  212. },
  213. mounted() {
  214. this.onResize = debounce(() => {
  215. this.resize();
  216. }, this.delay);
  217. this.$nextTick(() => {
  218. if (this.selfAdaption) {
  219. this.resize();
  220. this.addListener();
  221. }
  222. });
  223. },
  224. beforeDestroy() {
  225. this.clearListener();
  226. // this.observer.disconnect()
  227. },
  228. };
  229. //
  230. </script>
  231. <style scoped>
  232. .screen-box {
  233. overflow: hidden;
  234. background-size: 100% 100%;
  235. background: #000;
  236. width: 100vw;
  237. height: 100vh;
  238. }
  239. .screen-wrapper {
  240. transition-property: all;
  241. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  242. transition-duration: 500ms;
  243. position: relative;
  244. overflow: hidden;
  245. z-index: 100;
  246. transform-origin: left top;
  247. }
  248. </style>