drawMixin.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*
  2. * @Author: daidai
  3. * @Date: 2022-02-28 10:48:02
  4. * @LastEditors: Please set LastEditors
  5. * @LastEditTime: 2022-04-26 14:55:41
  6. * @FilePath: \web-pc\src\pages\big-screen\utils\drawMixin.js
  7. */
  8. // 屏幕适配 mixin 函数
  9. // * 默认缩放值
  10. const scale = {
  11. width: '1',
  12. height: '1',
  13. }
  14. // * 设计稿尺寸(px)
  15. const baseWidth = 1920
  16. const baseHeight = 1080
  17. // * 需保持的比例(默认1.77778)
  18. const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  19. export default {
  20. data() {
  21. return {
  22. // * 定时函数
  23. drawTiming: null,
  24. }
  25. },
  26. computed: {
  27. isScale(){
  28. return this.$store.state.setting.isScale
  29. }
  30. },
  31. mounted () {
  32. if(!this.isScale){
  33. return
  34. }
  35. this.calcRate()
  36. window.addEventListener('resize', this.resize)
  37. },
  38. beforeDestroy () {
  39. window.removeEventListener('resize', this.resize)
  40. },
  41. methods: {
  42. calcRate () {
  43. const appRef = this.$refs["appRef"]
  44. if (!appRef) return
  45. // 当前宽高比
  46. const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
  47. if (appRef) {
  48. if (currentRate > baseProportion) {
  49. // 表示更宽
  50. scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
  51. scale.height = (window.innerHeight / baseHeight).toFixed(5)
  52. appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
  53. } else {
  54. // 表示更高
  55. scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
  56. scale.width = (window.innerWidth / baseWidth).toFixed(5)
  57. appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
  58. }
  59. }
  60. },
  61. resize () {
  62. if(!this.isScale){
  63. return
  64. }
  65. clearTimeout(this.drawTiming)
  66. this.drawTiming = setTimeout(() => {
  67. this.calcRate()
  68. }, 200)
  69. }
  70. },
  71. }