123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- /*
- * @Author: daidai
- * @Date: 2022-02-28 10:48:02
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-04-26 14:55:41
- * @FilePath: \web-pc\src\pages\big-screen\utils\drawMixin.js
- */
- // 屏幕适配 mixin 函数
- // * 默认缩放值
- const scale = {
- width: '1',
- height: '1',
- }
- // * 设计稿尺寸(px)
- const baseWidth = 1920
- const baseHeight = 1080
- // * 需保持的比例(默认1.77778)
- const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
- export default {
- data() {
- return {
- // * 定时函数
- drawTiming: null,
- }
- },
- computed: {
- isScale(){
- return this.$store.state.setting.isScale
- }
- },
- mounted () {
- if(!this.isScale){
- return
- }
- this.calcRate()
- window.addEventListener('resize', this.resize)
- },
- beforeDestroy () {
- window.removeEventListener('resize', this.resize)
- },
- methods: {
- calcRate () {
- const appRef = this.$refs["appRef"]
- if (!appRef) return
- // 当前宽高比
- const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
- if (appRef) {
- if (currentRate > baseProportion) {
- // 表示更宽
- scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
- scale.height = (window.innerHeight / baseHeight).toFixed(5)
- appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
- } else {
- // 表示更高
- scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
- scale.width = (window.innerWidth / baseWidth).toFixed(5)
- appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
- }
- }
- },
- resize () {
- if(!this.isScale){
- return
- }
- clearTimeout(this.drawTiming)
- this.drawTiming = setTimeout(() => {
- this.calcRate()
- }, 200)
- }
- },
- }
|