Vue的全屏组件vue-fullscreen

用法：
1、在项目中安装组件

 npm install vue-fullscreen --save

2、在main.js文件中引入并安装

  import fullscreen from 'vue-fullscreen'Vue.use(fullscreen)

3、自定义组件，放上要全屏显示的内容

<template><div><fullscreen :fullscreen.sync="fullscreen"><img src="../assets/logo.png" alt="">//fullscreen组件内包裹的内容，即为全屏显示的内容     </fullscreen><button @click="toggle">点击全屏</button></div>
</template><script>export default{data(){return{fullscreen:false}},methods: {toggle(){this.fullscreen=!this.fullscreen}}}
</script><style lang="scss">
</style>

4、将自定义组件，引入到要调用的父组件内即可。

Vue的全屏组件vue-fullscreen相关推荐

vue上下全屏翻页_全屏翻页布局
vue上下全屏翻页 View demo 查看演示Download Source 下载源 We have received a couple of requests on how to use the ...
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
vue自写全屏/退出全屏组件
页面代码 isFullscreen主要是判断当前是否为全屏状态,然后展示不同的文字和svg图标组件传入的值为当前需要全屏的模块div的id名 vue data中定义是否全屏的值,默认为false i ...
前端vue实现全屏和按esc退出全屏功能
效果如下: 不多说,直接上代码如下,复制即可使用,注意图片位置修改即可: 1.vue页面中根据是否全屏判断当前显示图片或icon图标,isFullScren为true时表示全屏,默认值为false,并 ...
vue实现全屏只显示内容不显示导航条和退出全屏调用事件
啊萨达一.需求尝试分析二.实现内容全屏(导航条不显示) 1.页面全屏 2.部分元素全屏 3.退出全屏调用事件一.需求尝试分析先说一下需求:要求在第一个页面点击全屏按钮进入全屏或者第二个新的页面 ...
js vue+elementui 全屏跟退出全屏功能搬砖
html部分代码 <span class="user" @click="toggleFullScreen"><el-tooltip class ...
【VUE进入全屏写法】
methods: { // 进入全屏contorl_enter(){this.status = true;this.enterFullscreen();},// 退出全屏contorl ...
vue实现全屏登录视频背景并适配浏览器窗口大小
问题描述:接到一个需求,需要把登录页背景做成一个全屏的视频播放,并且能够根据浏览器窗口大小做到实时适配. 1.HTML结构首先用一个最外层容器包裹整个登陆页面,最外层容器使用flex布局,有利于窗口 ...
vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
vue screenfull全屏插件安装之后 npm run serve报错 Module parse failed: Unexpected token (55:42) You may need a
报错信息: 原因: 可能是screenfull组件版本问题,直接npm下载的话是下载的6.0版本,6.0版本就会报错(不知道为啥) 解决: npm install --save-dev screenf ...

Vue的全屏组件vue-fullscreen

Vue的全屏组件vue-fullscreen相关推荐

最新文章

热门文章