526互联

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

发布时间 2023-09-19 15:01:52作者: 刘宏缔的架构森林

一，官方站:

官网地址:

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