vue全屏事件开发详解
本文实例为大家分享了vue全屏事件开发的具体代码,供大家参考,具体内容如下
在项目中有需求相应浏览器全屏,写了个案例代码
先看看效果吧
全屏显示:
html代码:
<!-- el-tooltip 文字提示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom"> <i class="el-icon-rank"></i> </el-tooltip> </div>
js代码
data(){ return { fullscreen: false } } // 全屏事件 handleFullScreen(){ let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } } this.fullscreen = !this.fullscreen; },
通过fullscreen判断的true和false确定是否相应全屏
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue实现浏览器全屏展示功能
1.项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2.安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下: toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } 试了一
-
vue实现全屏滚动效果(非fullpage.js)
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下 是什么 网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起.当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面. 此次只实现鼠标滚动 实现原理 使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽) 代码实现 HTML <template> <div class=&qu
-
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even
-
富文本编辑器vue2-editor实现全屏功能
vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考. 实现思路:自定义模块. 1. 定义全屏模块Fullscreen /** * 编辑器的全屏实现 */ import noScroll from 'no-scroll' export default class Fullscreen { constructor (quill, options = {}) { this.quill = quill this.options = options this.fullscree
-
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能.... 这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程! 其实,我也是这样的,哈哈哈哈..... 废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开
-
vue-cli点击实现全屏功能
本文实例为大家分享了vue-cli点击实现全屏功能的具体代码,供大家参考,具体内容如下 项目中有点击按钮实现全屏功能 方式一:js实现全屏 代码如下: <template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div> </template> <script> export default {
-
vue全屏事件开发详解
本文实例为大家分享了vue全屏事件开发的具体代码,供大家参考,具体内容如下 在项目中有需求相应浏览器全屏,写了个案例代码 先看看效果吧 全屏显示: html代码: <!-- el-tooltip 文字提示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscr
-
vue鼠标悬停事件实例详解
具体代码如下所述: v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例化</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dis
-
Vue方法与事件处理器详解
本文实例为大家分享了Vue方法与事件处理器的使用,供大家参考,具体内容如下 按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> 记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名: <!-- 同上 --> <inpu
-
VUE长按事件需求详解
在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求. 需求一:长按数字累加或者累减 HTML: <div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'> <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart=&
-
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn
-
基于vue 兄弟组件之间事件触发(详解)
直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t
-
Vue在echarts tooltip中添加点击事件案例详解
目录 需求 解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码 需求 需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件) 项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上 解决方法 1.设置tooltip enterable: true, //允许
-
Android开发使用RecyclerView添加点击事件实例详解
目录 引言 一.RecyclerView基本使用 1. 添加适配器Adapter 2. 创建列表的每个项的item_layout.xml文件 3. 在activity中使用 二.RecyclerView点击事件详细步骤 1. 在RecyclerView对应的Adapter类里面新建接口 2. 在Adapter类里创建setOnItemClickListener方法 3. 在Adapter类的onBindViewHolder里给每个item设置回调 4. 在RecyclerView对应的Activ
-
vue demi支持sfc方式的vue2vue3通用库开发详解
目录 背景 技术要点 vue-demi sfc compiler 实现方式 vue2.6 + vue3 + vite + vue-demi package.json vite.config.ts main.ts postinstall vue2.7 + vue3 + vite + vue-demi + yarn workspaces 目前没找到vue3为主包的开发方式 注意点 1.@vue/composition-api重复引用问题 2.由于要兼容vue2,vue3的 setup sfc语法糖不
-
Vue首评加载速度及白屏时间优化详解
目录 项目背景 splitChunks CDN GZIP 删除文件预加载 项目背景 测试环境的管理后台应客户需求最近加了点东西,加载的东西变多,使得整个项目变得有点臃肿了,首屏以及刷新后渲染速度变得极其缓慢.之前10s左右还能勉强接受,这次一下干到30s,整个人都崩溃了,花了点时间优化了一下. 环境:vue:2.6.11,vue-cli:3.0 splitChunks 看到上面图片里的文件其实并不大,最大的也就287k. 这也是优化过的,之前都是有的最大为1m左右,在vue.config.js配
随机推荐
- 详谈Java几种线程池类型介绍及使用方法
- Java实现双色球抽奖随机算法示例
- 使用iOS控件UICollectionView生成可拖动的桌面的实例
- oracle表的简单操作步骤
- .NET简单工厂模式讲解
- PHP下操作Linux消息队列完成进程间通信的方法
- python通过openpyxl生成Excel文件的方法
- Python创建xml的方法
- Android入门之PopupWindow用法实例解析
- 在Ubuntu或Debian系统的服务器上卸载MySQL的方法
- JavaScript实现表格点击排序的方法
- python实现telnet客户端的方法
- jquery跨域请求示例分享(jquery发送ajax请求)
- 又一实用的常用CSS缩写语法收集
- JQuery 获取Dom元素的实例讲解
- Win2003系统下SQL Server 2008安装图解教程(详细图解)
- 详解java集成支付宝支付接口(JSP+支付宝20160912)
- Yii2第三方类库插件Imagine的安装和使用
- PHP 操作文件的一些FAQ总结
- android实现简单计算器功能