VUE3使用screenfull利用dom节点部分全屏

于 2024-08-14 17:17:27 发布
阅读量123 收藏
点赞数
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80636534/article/details/141195899
版权 
<div id="bigImg"   @click="togglefullscreen"></div>

<script>
import screenfull from 'screenfull'

function togglefullscreen () {
  const ele = document.getElementById('bigImg')
  if (screenfull.isEnabled) {
    screenfull.toggle(ele)
    console.log('bigImg', ele)
  }
}
</script>

一只不会编程的猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
// 使用Vue 2.0的ref属性获取DOM节点 const box = this.$refs.box; // 对该区域进行滚动操作的逻辑... } }; ``` 在这个示例中，`goods-area`类的元素设置为可滚动，而`bottom-mask`类的元素则会在滚动到一定...
HTML5全屏幻灯片背景切换效果.zip
07-05
在这个例子中，如果没有使用这些库，那么可能会有手动操作DOM节点和动画实现的代码。 总的来说，这个压缩包中的HTML5全屏幻灯片背景切换效果是一个结合了HTML5新特性、CSS3样式和JavaScript动态效果的综合实例。它...
vue3使用screenfull实现全屏
哈
04-26 6681
理论 npm地址：https://www.npmjs.com/package/screenfull 使用方法 安装 npm install screenfull --save 在使用.vue文件中 引入 import screenfull from ‘screenfull’ 在按钮方法中调用方法可以双向切换全屏与非全屏 screenfull.toggle() 还可以 检测全屏状态 screenfull.isFullscreen 测试浏览器是否支持全screenfull screenfull.isEna
vue3 使用screenfull插件全屏显示页面、全屏显示元素DOM节点
arrow.light的博客
02-24 4143
vue3 使用screenfull插件全屏显示页面、全屏显示元素DOM节点。需求背景：移动端打开网站，发现不能充分利用屏幕空间，浏览器自带的全屏功能很难找，用户体验较差。并且有些元素比如图片需要去放大看，这时如果点击就能全屏，再点击就退出，用户体验可以提升。
vue3使用screenfull插件实现全屏效果
NolanKy 的 技术博客
09-15 804
npm地址：https://www.npmjs.com/package/screenfull 使用方法 安装 npm install screenfull --save 在使用.vue文件中 引入 import screenfull from "screenfull" 在按钮方法中调用方法可以双向切换全屏与非全屏 screenfull.toggle() 还可以 检测全屏状态 screenfull.isFullscreen 测试浏览器是否支持全screenfull screenfull.isEnabl
vue 项目设置全屏，使用screenfull插件
weixin_45665171的博客
03-28 2976
vue项目使用screenfull插件设置全屏，及在项目中导入screenfull插件出现编译错误的解决方法。
简述vue项目中指定某个DOM进入全屏模式与退出全屏
bigpatten的博客
01-19 1220
vue项目中指定某个DOM进入全屏模式与退出全屏 首先安装全屏插件 npm install screenfull@4.2.1 --save 在使用的页面中引入 import screenfull from ‘screenfull’ 我们指定某个DOM元素的id，然后获取这个DOM节点 methods: { // 定义全屏方法，通过按钮点击触发 fullscreenHandle () { const element = document.getElementById('ta
VUE项目实现全屏显示功能---screenfull
weixin_45748897的博客
12-30 6297
摘要：使用screenfull 插件 大多数开发项目中都需要全屏显示功能，在vue项目中有比较方便的插件 screenfull。npm地址：https://www.npmjs.com/package/screenfull 点击图标 全屏显示 再次点击退出全屏或者Esc 退出 使用方法 npm install screenfull --save 首先安装 npm install scre...
vue 全屏 screenfull.js 使用及API
consoleloghello的博客
09-27 518
vue 全屏 screenfull.js 使用及API 这里写目录标题vue 全屏 screenfull.js 使用及API一、安装二、使用三、API 一、安装 npm install screenfull --save 二、使用 <template> <div class="btn-fullscreen"> <i class="el-icon-rank" @click="fullScreen()"></i> </div&gt
Vue3的全屏插件
阳阳的博客
04-12 1132
Vue3中我用的是 screenfull 插件 官网：screenfull 相关API .request(ele) 全屏 .exit() 退出全屏 .toggle() 切换全屏 .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件 .off(event, function) ： 移除前面已经注册的事件 .element： 返回一个全屏的dom节点，如果没有就为 null .isFullscreen ： 是否是全屏状态 .isEnab.
vue中实现全屏----插件screenfull.js
qq_44774831的博客
04-26 2132
全屏功能安装screenfull.js在vue中的使用 安装screenfull.js npm install screenfull --save // 如果取到的浏览器允许全屏的值为undefind，换下面的语句 cnpm install screenfull@4.2.0 --save 在vue中的使用 <template> <div class="btn-fullscreen"> <!--1.这里使用了elementui的图标，调用方法中的全屏事件-->
vue动态加载SVG文件并修改节点数据的操作代码
10-14
3. **添加事件和修改节点**： 使用`addEvents`函数为SVG元素添加交互，例如点击事件、鼠标滚轮事件和全屏事件。同时，你可以通过访问和修改`svgDom`中的特定节点来改变SVG的显示效果。例如，你可以通过选择器找到...
各种不同行业的大屏模版
09-26
5. **DOM操作**：获取和修改元素属性、事件处理、节点操作等。 这个压缩包很可能包含一系列HTML文件作为模板结构，JS文件负责交互逻辑，CSS文件用于样式设计，可能还会有Vue组件文件。开发者可以通过这些文件快速...
5分钟实现Canvas鼠标跟随动画背景
12-09
1. **CSS3**：利用关键帧（@keyframes）和CSS过渡来实现动画，但这种方法会增加DOM节点，不符合语义化编程原则。 2. **SVG**：SVG是一种使用XML描述2D图形的语言，每个图形都是独立的DOM元素，因此可以使用CSS和...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 531
ASP.NET Core Web API 使用Autofac框架
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
最新发布
qq_30193097的博客
08-13 118
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 1034
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端JS总结（中）
m0_54066656的博客
08-12 673
前端JS之内置对象总结，这很重要！！！
vue3.0 使用screenfull库进行全屏
06-06
在 Vue 3.0 中使用 screenfull 库进行全屏显示，可以按照以下步骤进行： 1. 安装 screenfull 库 ```shell npm install screenfull --save ``` 2. 在组件中引入 screenfull 库 ```javascript import screenfull from "screenfull"; ``` 3. 在组件中添加全屏切换方法 ```javascript toggleFullScreen() { if (screenfull.isEnabled) { screenfull.toggle(this.$refs.fullscreenRef); } } ``` 在上述代码中，我们检查了当前浏览器是否支持全屏 API，如果支持则调用 `screenfull.toggle()` 方法来切换全屏状态，其中 `this.$refs.fullscreenRef` 是需要全屏显示的元素的引用。 4. 在模板中添加全屏切换按钮 ```html <template> <div> <button @click="toggleFullScreen">全屏</button> <div ref="fullscreenRef">需要全屏显示的内容</div> </div> </template> ``` 在模板中，我们添加了一个全屏切换按钮和一个需要全屏显示的内容的引用。 完整的组件代码如下： ```html <template> <div> <button @click="toggleFullScreen">全屏</button> <div ref="fullscreenRef">需要全屏显示的内容</div> </div> </template> <script> import screenfull from "screenfull"; export default { methods: { toggleFullScreen() { if (screenfull.isEnabled) { screenfull.toggle(this.$refs.fullscreenRef); } } } }; </script> ``` 需要注意的是，虽然 screenfull 库可以帮助我们简化全屏显示的实现，但在使用该库时仍需要进行浏览器兼容性测试，保证在不同浏览器和设备上都能正常工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值