doc---vue-cli脚手架项目问题总结（17）——vue的项目在各设备运行的问题

最新推荐文章于 2024-09-13 07:30:43 发布

蓝色星辰0712

最新推荐文章于 2024-09-13 07:30:43 发布

阅读量179

点赞数

分类专栏：工作技术总结

本文链接：https://blog.csdn.net/qq_38185872/article/details/105535158

版权

工作技术总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

##、处理页面中输入框，键盘弹起遮盖输入框的问题解决
在这里插入图片描述
//键盘遮挡输入框的处理方法

Vue.prototype.avoidCoverInput = function(eleId){
	setTimeout(function(){
		let pannel = document.getElementById(eleId);
		pannel.scrollIntoView(false);
		pannel.scrollIntoViewIfNeeded();
	}, 200)
}

页面中调用（传入要处理的区域块的id值）
在这里插入图片描述

##、vue 监听屏幕高度
项目用vue版本是2.0的，项目中用到es6

首先需要在data里面定义页面的高度

data (){
    return {
        fullHeight: document.documentElement.clientHeight
    }
}

把window.onresize事件挂在到mounted

mounted() {
    const that = this
    window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
    }
}

监听window.onresize事件

watch: {
    fullHeight (val) {
        if(!this.timer) {
           this.fullHeight = val
           this.timer = true
           let that = this
           setTimeout(function (){
              that.timer = false
           },400)
        }
    }
}

这里的定时器是为了优化，如果频繁调用window.onresize方法会造成页面卡顿，增加定时器会避免频繁调用window.onresize方法

##、vue中视频的不能播放的问题

<!--视频-->
<div class="video" v-if="detail_data.video!=''">
	<video width="100%" height="" :src="detail_data.video" controls="controls" :poster="detail_data.video_album">
		<source :src="detail_data.video" type="video/mp4"></source>
		<source :src="detail_data.video" type="video/ogg"></source>
		<source :src="detail_data.video" type="video/webm"></source>
		<object width="" height="" type="application/x-shockwave-flash" :data="detail_data.video">
			<param name="movie" :value="detail_data.video" />
			<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
		</object>
		当前浏览器不支持 video直接播放，点击这里下载视频： <a :href="detail_data.video">下载视频</a>
	</video>
</div>