vue点击按钮实现让页面的某一个元素全屏展示

目录
  • 点击按钮让页面的某一个元素全屏展示
    • 先上效果图
    • 页面结构
    • 在页面加载时添加监听
  • vue全屏和退出全屏调用事件
    • 页面全屏
    • 部分元素全屏
    • 退出全屏调用事件

点击按钮让页面的某一个元素全屏展示

先上效果图

项目情况:vue+screenfull插件

其实文档上写的很清楚:screenfull文档

点击页面的全屏图标,使包裹地图的div实现全屏。

页面结构

在页面加载时添加监听

 mounted () {
        const element = document.getElementById('map_container');
        document.getElementById('full_screen').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request(element);
            }
        });
    },

vue全屏和退出全屏调用事件

1、先说一下需求

要求在第一个页面点击全屏按钮进入全屏或者第二个新的页面全屏,并且按F11或esc退出全屏回退到第一个小屏页面

失败的尝试:

显示尝试利用原生来实现,但是发现退出全屏时,我们想在F11上面添加一些事件(比如退回上一页面路由;添加弹窗等操作)无法实现,原因是浏览器不允许我们自定义F11退出全屏按键,因为如果可以自定义的话,那么有恶意的方式让用户点击全屏进去,然后我们去禁用这个全屏按钮那么岂不是用户没有办法退出了

2、正确如下

利用screenfull插件直接去监听页面的大小改变,不用去监听按键事件

首先安装screenfull

npm install screenfull@4.2.0 --save

在需要全屏的组件中引入

import screenfull from "screenfull";

页面全屏

template中写好一个全屏按钮和点击事件

<div class="one" @click="btn">
            <i
              class="iconfont icon-quanping1"
              style="margin-top: 1px;"
            ></i>
          </div>

在methods中添加btn事件

btn() {
      document.documentElement.webkitRequestFullScreen(); //进入全屏
      screenfull.toggle();//全屏显示
    },

部分元素全屏

写好点击图标,然后在需要显示的元素上添加id

    <div
        :class="isCollapse ? 'ifa-collapsed' : 'ifa'"
        ref="full_el"
        id="screen"
      >
        <router-view />
      </div>

在methods中添加btn事件

  btn() {
       let element = document.getElementById("screen"); //指定全屏区域元素
        screenfull.toggle(this.element); //全屏显示
    },

退出全屏调用事件

如果是跳转到第二个页面全屏的状态

当esc或f11退出全屏后,我们虽然不能监听退出全屏的按键,但是可以根据监听页面大小变化调用事件

data() {
    return {
      isFull:'',//全屏检查
      }
   }
watch: {
    isFull(newvalue, oldvalue) {
      console.log("我监听到了");
       event.keyCode=0;
       
      this.$router.go(-1);
    },
  },
methods: {
      checkFull() {
      let isFull = window.fullScreen || document.webkitIsFullScreen;
      this.isFull = isFull;
      console.log("isfull"+this.isFull);
    },
 },
created() {
     window.onresize = () => {
      //调用判断全屏的方法,用来监听
      this.checkFull();
    };
  },

注意点:

如果页面当中echars图或者是有组件有使用过window.onresize方法进行适应时,那么此时的created监听退出全屏会失效,

解决方式:

  • 1.删点组件中的window.onresize函数
  • 2.利用监听的方式同时监听两个onresize方法如下
        window.addEventListener("resize", () => {
          this.myChart.resize(),//可以自定义添加多个方法
           this.checkFull();
        });

就可以解决冲突的问题了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue中实现点击变成全屏的多种方法

    项目中有点击按钮实现全屏功能 方式一:js实现全屏 <template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div> </template> data: data() { return { fullscreen: false }; }, methods: screen() { let element =

  • vue-cli点击实现全屏功能

    本文实例为大家分享了vue-cli点击实现全屏功能的具体代码,供大家参考,具体内容如下 项目中有点击按钮实现全屏功能 方式一:js实现全屏 代码如下: <template> <div> <a-button type="primary" @click="screen">全屏</a-button> </div> </template> <script> export default {

  • vue实现浏览器全屏展示功能

    1.项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2.安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下: toggleFullscreen() { if (!screenfull.enabled) { this.$message({ message: 'you browser can not work', type: 'warning' }) return false } screenfull.toggle() } 试了一

  • vue点击按钮实现让页面的某一个元素全屏展示

    目录 点击按钮让页面的某一个元素全屏展示 先上效果图 页面结构 在页面加载时添加监听 vue全屏和退出全屏调用事件 页面全屏 部分元素全屏 退出全屏调用事件 点击按钮让页面的某一个元素全屏展示 先上效果图 项目情况:vue+screenfull插件 其实文档上写的很清楚:screenfull文档 点击页面的全屏图标,使包裹地图的div实现全屏. 页面结构 在页面加载时添加监听 mounted () { const element = document.getElementById('map_co

  • vue点击按钮实现简单页面的切换

    本文实例为大家分享了vue点击按钮实现页面切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">

  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法 原文地址 http://www.sharedblog.cn/?post=205 <template> <div class="box"> <div class="btn"> <span @click="Submit(1)">按钮一</span> <span @click="Submit(2

  • vue 点击按钮实现动态挂载子组件的方法

    Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数 示例:子组件 byMount.vue <template> <div> <div>mount content test!!</div> </div> </template&

  • vue 点击按钮增加一行的方法

    如下所示: data() { return { customized_descs: [1], } }, 不要js,jq里面的方法了. 以上这篇vue 点击按钮增加一行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • PyQt5 designer 页面点击按钮跳转页面实现

    目录 使用 designer 进行开发 PyQt5 实现两个页面跳转 PyQt5 实现多个页面跳转 补充:使用 designer 开发,页面跳转函数 不使用 designer 的页面跳转 使用 designer 进行开发 首先要知道,使用 Qt designer 和 代码进行 Qt 开发实现页面跳转是不一样的,这里我们使用的是 designer 开发,在这里简单记录一下. PyQt5 实现两个页面跳转 目前场景: 用 Qt designer 设计好了两个页面:a_ui.py.b_ui.py a_

  • js控制页面的全屏展示和退出全屏显示的方法

    本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

  • android实现点击图片全屏展示效果

    本文实例为大家分享了android实现点击图片全屏展示的具体代码,供大家参考,具体内容如下 MainActivity: public class MainActivity extends AppCompatActivity { private ImageView imageView; private Dialog dialog; private ImageView image; @Override protected void onCreate(Bundle savedInstanceState

随机推荐