浅析vue如何实现手机横屏功能

<view class="box">
    <view class="jxcLandscape" :style="{width:newHeight+'px',height:newWidth+'px'}">
        <view class="title_H">
            <view @click="handleBack" class="image_H">
                <img style="width:40rpx;height: 40rpx;margin-right: 8rpx;" src="@/static/screen.png" />
                退出横屏
            </view>
        </view>
        
        <!--主要内容区-->
    </view>
</view>

.box{
        position: relative;
        width: 100%;
        height: 100vh;
        overscroll-behavior: none;
    }
    .jxcLandscape{
        padding: 10px;
        transform: rotate(90deg); // 关键代码
        transform-origin: 0% 0%; // 关键代码
        position: absolute;
        top: 0%;
        left: 100%;
        margin-left: 0;
            
    }

onLoad(){
    let that=this
    uni.getSystemInfo({
        success: function (res) {
            that.newWidth=res.windowWidth
            that.tablenewWidth=res.windowWidth-50
            if(res.platform=='android'){
                this.getStatusBarHeight((height) => {
                    that.barHeight = height
                    that.newHeight=res.windowHeight-that.barHeight
                })
            }else{
                // 这是苹果操作系统
                that.newHeight=res.windowHeight
            }
        }
    })
},
methods:{
    getStatusBarHeight(){
        let barHeight = 51
        if (uni.getSystemInfoSync().platform == "ios") {
            // ios {}可传参 
            this.callhandler('getStatusBarHeight', "", callBack);
        }
        if (uni.getSystemInfoSync().platform == "android") {
            // Android
            if (window.webkit) {
                barHeight = window.webkit.getStatusBarHeight()
                callBack(barHeight)
            }
        }
    },
    callhandler(name, data, callback) {
        setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            return callback(window.WebViewJavascriptBridge)
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback)
        }
        window.WVJBCallbacks = [callback]
        let WVJBIframe = document.createElement('iframe')
        WVJBIframe.style.display = 'none'
        WVJBIframe.src = 'https://__bridge_loaded__'
        document.documentElement.appendChild(WVJBIframe)
        setTimeout(() => {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }
}