vue中实现全屏功能

女爷i 2023-01-08 05:25 162阅读 0赞

安装全屏插件

npm i screenfull --save

页面引入

import screenfull from 'screenfull';

html

<template>
      <div class="hello">
        <div class="full-screen" @click="fullScreen()">{
        {
         fullscreen ? '全屏' : '取消全屏' }}</div>
        <div id="data-screen" @click="fullScreenB()">
          <span style="color: red">我是部分全屏</span>
        </div>
      </div>
    </template>

<script>
    import screenfull from 'screenfull';
    export default {
        
      name: 'HelloWorld',
      data() {
        
        return {
        
          // 控制全屏
          fullscreen: true
        };
      },
      methods: {
        
        // 点击全屏展示
        fullScreen() {
        
          if (!screenfull.isEnabled) {
        
            this.$message({
        
              message: 'you browser can not work',
              type: 'warning'
            });
            return false;
          }
          screenfull.toggle();
          this.fullscreen = screenfull.isFullscreen;
        },
        // 点击部分全屏展示
        fullScreenB() {
        
          const bodyEle = document.getElementById('data-screen');
          if (!screenfull.isEnabled) {
        
            this.$message({
        
              message: 'you browser can not work',
              type: 'warning'
            });
            return false;
          }
          screenfull.toggle(bodyEle);
        }
      }
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3使用screenfull实现全屏

理论 npm地址：[https://www.npmjs.com/package/screenfull][https_www.npmjs.com_package_scree

朱雀/ 2023年01月16日 15:20/ 0 赞/ 258 阅读

相关 vue中实现全屏功能

安装全屏插件 npm i screenfull --save 页面引入 import screenfull from 'screenfull'; htm

女爷i/ 2023年01月08日 05:25/ 0 赞/ 163 阅读

相关 vue 全屏组件

第一步，安装依赖安装[screenfull.js][]依赖包 npm install screenfull -S 第二步，添加组件图标，样式等

梦里梦外;/ 2022年12月17日 07:12/ 0 赞/ 172 阅读

相关 vue 全屏和退出全屏

html源码： <div id="allScreen" @click="showScreen" > <div >全屏内容 </div>

Dear 丶/ 2022年12月06日 15:48/ 0 赞/ 265 阅读

相关 vue-element-admin/template的全屏功能实现

> vue-element-admin的`全屏`功能 > 1.首先把vue-element-admin中的`src/components/Screenfull` 复制到自

女爷i/ 2022年11月13日 12:26/ 0 赞/ 345 阅读

相关 js实现一个全屏和退出全屏的功能

$(function(){ //全屏 function fullScreen(){ var el = doc

妖狐艹你老母/ 2022年09月10日 00:12/ 0 赞/ 254 阅读

相关 VirtualBox安装增强功能实现全屏

（1）首先请在 VirtualBox 里启动安装好的 Windows 虚拟机，如图所示 ![70][] （2）在启动后的窗口中点击“设备”，选择“安装增强功

布满荆棘的人生/ 2022年05月21日 02:47/ 0 赞/ 347 阅读

相关 VC实现全屏功能

void FullScreen() { //以下3行代码实现全屏 HWND hwnd = GetHWnd(); SetWindow

柔情只为你懂/ 2022年02月03日 02:07/ 0 赞/ 314 阅读

相关 vue项目中使用screenfull.js实现全屏，缩放功能

1. 第一步安装依赖 `cnpm install --save screenfull` 2. 封装组件 components下创建文件夹Screenfull 下创建文件in

Bertha 。/ 2021年12月05日 12:57/ 0 赞/ 724 阅读

相关 JavaScript实现全屏与退出全屏功能

js全屏与退出全屏 //全屏显式 function showFull() { var full = docu

待我称王封你为后i/ 2021年08月28日 20:10/ 0 赞/ 555 阅读