vue 项目中全屏插件

1.下载npm   i  screenfull

2.在引用页面引入

// 引入全屏
import screenfull from "screenfull";

  components: {screenfull,},

3.用fullscreen标签将需要全屏的盒子包裹

<button @click="toggle">全屏</button>
<fullscreen :fullscreen.sync="fullscreen"><h1>11111111111111</h1><h2>222222222222</h2>
</fullscreen>

4.全屏效果

vue 项目中全屏插件相关推荐

实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue项目中使用视频插件
昨天写一个非物质文化遗址展览项目需要用到视频播放这块, 所以了我就在网站找了一下插件最后确定了就用 vue-vedio-player 首先我们先安装这个插件 npm install vue-video ...
Vue项目设置全屏背景图片上方有白边的问题
今天在Vue框架下写一个登录页面想弄个全屏的背景,添加完背景图片之后发现上方有一个小小的白边,并且添加完成之后整个页面是可以稍微上下滑动的,非常的不美观. 就是这个非常小的白边,让整个页面都可以滑动 ...
vue项目中使用粒子插件
效果如下: 1.安装依赖: npm install vue-particles --save-dev 2.main.js引入 import VueParticles from 'vue-particl ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
vue项目中使用iview插件中this.$Modal.confirm的使用方法
当我们项目中需要根据id或者其他删除一个选项时,我们会首先弹出确认删除对话框,询问用户是否删除,iview中confirm的用法与elment-ui不同,官方链接:https://www.iviewu ...
vue项目中使用bankcardinfo插件根据银行账号识别开户行
步骤一:npm install bankcardinfo 步骤二:main.js中引入 import getBankcardinfo from 'bankcardinfo' Vue.prototype ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
vue项目中常用的优秀插件库
1. vue的ui框架: pc端UI框架:iview,element-ui 移动端UI框架:参考https://www.jianshu.com/p/c3c671787d1d 2. vue的数字动画插件 ...

vue 项目中全屏插件

vue 项目中全屏插件相关推荐

最新文章

热门文章

vue 项目中 全屏插件

vue 项目中 全屏插件相关推荐

最新文章

热门文章

vue 项目中全屏插件

vue 项目中全屏插件相关推荐