vue2 uses the vueUse library to implement full screen functionality

Table of contents

Preface

1. VueUse

2. Usage steps

1.Installation

2.Introduction

3.Initialization

Summarize

---

Preface

To achieve full-screen display of the entire page and full-screen display of specified DOM elements, the useFullscreen method in the VueUse tool library is used here.

Getting Started with Chinese Documentation  | VueUse Chinese Documentation

Refer to the article  specific usage of Vue tool library VueUse

Reference article  Introduction to common functions of VueUse

---

1. VueUse

VueUse is a collection of functions based on the combined API , suitable for Vue 3 and Vue2.7 and later versions. It provides dozens of solutions for common developer use cases, such as tracking reference changes, detecting element visibility, simplifying common Vue patterns, keyboard/mouse input, and more. This is a great way to really save development time because you don't have to add all these standard features yourself. 

2. Usage steps

1.Installation

npm i @vueuse/core

2.Introduction

import { useFullscreen } from "@vueuse/core";

3.Initialization

Call the init() method within mounted() to initialize, and deconstruct to get the corresponding method.

    init(){
      const { toggle:fullWindowScreenAction } = useFullscreen();
      window.fullWindowScreenAction = fullWindowScreenAction
      const domScreen = document.getElementById('domScreen')
      const { toggle: fullscreenAction } = useFullscreen(domScreen)
      window.fullscreenAction = fullscreenAction
    },

• Display the entire page in full screen

Deconstruct to get the fullWindowScreenAction method, click the button to switch the page between full screen and non-full screen.

 full screen

 

• DOM element full screen

      <div class="fullscreen-dom-content" id="domScreen" @click="fullscreenHandler('dom')" ref="domRef">
        <div class="title">DOM元素切换全屏</div>
        <div class="content-inner">
          <el-button
            class="fullscreen-btn"
            type="primary"
          >
            {
   
   { isDomFullscreen ? '退出全屏' : '点击全屏'}}
          </el-button>
        </div>
      </div>

Pass in the DOM element id [domScreen], deconstruct it to get the fullscreenAction method, and click the button to switch between full screen and non-full screen of the DOM element.

---

full screen

 

 

Summarize

This article mainly uses the useFullscreen method to realize the full-screen function of pages and DOM elements. There are still many functions to be explored. We will record the corresponding functions in the future.