Dat.gui 是一个 GUI 组件,他可以为你的 demo 提供参数的设置
先看一下想实现的效果
美观又实用 下边我们来简单实现下通过gui实现全屏与退出全屏
安装与引入
npm install --save dat.gui
import * as dat from "dat.gui";
实例化对象
const gui = new dat.GUI(); //可传递参数{ closed:true ,width:400 }
封装一个对象方法
let eventObj = {fullScreen: function () {document.body.requestFullscreen();},ExitFullscreen: function () {document.exitFullscreen();},
};
然后gui直接添加就OK了
gui.add(eventObj, "fullScreen").name("全屏");
gui.add(eventObj, "ExitFullscreen").name("退出全屏");
就实现上边那个效果了 点击全屏就展示全屏 点击退出全屏就退出全屏