vue中实现全屏功能

女爷i 2023-01-08 05:25 112阅读 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 条评论，112人围观）

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

相关阅读

相关 vue中全选功能的实现

在Vue中实现全选功能可以通过以下步骤完成： 1. 首先在data中定义一个选中状态的变量，比如`isChecked`，并将其初始化为false。 2. 在全选的chec

小灰灰/ 2024年03月25日 11:26/ 0 赞/ 31 阅读

相关 vue3使用screenfull实现全屏

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

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

相关 vue中实现全屏功能

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

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

相关 vue 全屏和退出全屏

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

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

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

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

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

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

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

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

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

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

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

相关 VC实现全屏功能

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

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

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

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

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

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

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

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