vue:安装使用screenfull(screenfull@6.0.2/ vue@3.3.4)

news/发布时间2024/5/16 17:51:49

一,官方站:

官网地址:

https://sindresorhus.com/screenfull/

代码地址:

https://github.com/sindresorhus/screenfull.js

二,安装:

1,安装

root@lhdpc:/data/vue/responsive# npm install --save screenfull

2,安装完成后查看版本:

root@lhdpc:/data/vue/responsive# npm list screenfull
responsive@0.1.0 /data/vue/responsive
└── screenfull@6.0.2

三,引入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import screenfull from 'screenfull' //引入screenfull
...
setup() {
    //保存是否全屏的状态
    const isFullScreen = ref(false);
    //当全屏按钮被点击
    const screenfull_click  = () => {
      if (screenfull.isEnabled) {
         //切换全屏状态
        screenfull.toggle()
        isFullScreen.value = !screenfull.isFullscreen
      }
    };
}

四,查看效果:

说明:刘宏缔的架构森林—专注it技术的博客,
网站:https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/09/18/vue-an-zhuang-shi-yong-screenfull-screenfull-6-2/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com

五,查看vue框架的版本:

root@lhdpc:/data/vue/responsive# npm list vue
responsive@0.1.0 /data/vue/responsive
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.4.0
│   │ └── vue@3.3.4 deduped
│   └── vue@3.3.4 deduped
└─┬ vue@3.3.4└─┬ @vue/server-renderer@3.3.4└── vue@3.3.4 deduped

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ulsteruni.cn/article/03530165.html

如若内容造成侵权/违法违规/事实不符,请联系编程大学网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

AI绘画:SD绘画变现及实操过程-斗罗大陆-唐雅-高清壁纸

资源内容介绍: 大家好,我是小梦,最近一直研究AI绘画领域,总结了一些变现的方式,需要的可以来这里阅读下: AI绘画:无私分享我的AI绘画变现之路,普通人可实操可模仿都是自己经过实操,总结出来的,内容非常的干货,没有任何套路。不久前,耗费了半个月的时间给大家整理分…

3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

html和css的关系:HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。CSS (Cascading Styl…

HackTheBox系列之Unicode

本次推荐的模拟环境如下: https://www.hackthebox.com/本次环境主要涉及Nginx目录遍历、JKU伪造、JWT令牌伪造、命令注入、SUDO提权,目标拿下flag。扫描客服微信 获取完整PDF

OpenSNS V6.2.0漏洞分析

前台RCE 原理分析 触发条件 这篇博客将详细解释前台RCE漏洞的原理。首先,让我们看一下触发这个漏洞的条件。 在 Application/Weibo/Controller/ShareController.class.php 中存在 shareBox 方法,它从GET请求中获取名为 query 的参数值,对其进行解码,然后将解码后的值和相应…

读高性能MySQL(第4版)笔记10_查询性能优化(上)

查询优化1. 三管齐下 1.1. 不做、少做、快速地做 1.2. 如果查询太大,服务端会拒绝接收更多的数据并抛出相应错误 1.3. 如果查询写得很糟糕,即使库表结构再合理、索引再合适,也无法实现高性能 1.4. 查询优化、索引优化、库表结构优化需要齐头并进,一个不落 1.5. Percona Too…

DDR,总线,PCIE技术分析

DDR,总线,PCIE技术分析 PCIE开发笔记(一)简介篇这是一个系列笔记,将会陆续进行更新。最近接触到一个项目,需要使用PCIE协议,项目要求完成一个pcie板卡,最终可以通过电脑进行通信,完成电脑发送的指令。这当中需要完成硬件部分,使用FPGA板实现,同时需要编写Windows下的…