vue3项目实现全屏功能

方法1：使用npm包——screenfull

https://www.npmjs.com/package/screenfull

1、下包：npm i screenfull

2、在需要实现该功能的页面引入screenfull

import screenfull from 'screenfull';

但需要注意的是，在vue3项目中引入这个包可能会报一个红色波浪线的错误，这是无法识别包的类型的错误，那么这时可以在项目的目录中找到env.d.ts这个文件，在里面声明declare module 'screenfull'，这样报错就解决了。

3、在你的页面的布局外面包一层div，这个div里面会放你的版，样式正常排，给它绑定ref，里面的按钮也绑定ref，这样可以通过ref去获取dom节点。

<template>
     <div ref="map_container" id="map_container">         
        <button id="full_screen" ref="full_screen">点击全屏</button>  
    </div>
</template>

4、关键代码的实现

npm官网上的代码是：