Vue 实现浏览器全屏 及 npm install 遇到 -4048 错误的解决办法
【摘要】 一、前言项目开发过程中,优化项目时考虑加入全屏功能。具体实践步骤如下: 二、安装依赖项目中使用的是sreenfull插件,执行命令安装:npm install --save screenfull 三、应用组件安装好后,引入项目,用一个按钮进行控制即可,通过Esc键退出全屏按钮方法如下:<script>import screenfull from 'screenfull'export def...
一、前言
项目开发过程中,优化项目时考虑加入全屏功能。具体实践步骤如下:
二、安装依赖
项目中使用的是sreenfull
插件,执行命令安装:
npm install --save screenfull
三、应用
组件安装好后,引入项目,用一个按钮进行控制即可,通过Esc
键退出全屏按钮方法如下:
<script>
import screenfull from 'screenfull'
export default {
data () {
return {
isFullscreen: false
}
},
methods: {
/**
* 全屏事件
*/
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: 'Your browser does not work',
type: 'warning'
})
return false
}
screenfull.toggle()
this.isFullscreen = true
},
/**
* 是否全屏并按键ESC键的方法
*/
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false
}
return isFull
}
},
mounted() {
window.onresize = () => {
// 全屏下监控是否按键了ESC
if (!this.checkFull()) {
// 全屏下按键esc后要执行的动作
this.isFullscreen = false
}
}
}
}
</script>
四、拓展阅读
一、前言
项目环境: vue+weback
,操作系统: win7 64位
在安装vue
项目npm
依赖包过程中,居然破天荒的遇到了4048
错误,具体错误截图如下图所示:
二、解决方法
-
进入项目目录,把
node_modules
文件夹删除,package-lock.json
文件也删除; -
以管理员身份运行
CMD
; -
cd
到项目目录,先清除npm
缓存:npm cache clean --force
-
再进行
npm install
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)