怎么让网站排名下降,公司网站维护一般需要做什么,友链互换平台推荐,渝中网站公司后台管理系统中有一个比较常见的功能就是全屏显示#xff0c;以方便用最大的屏幕查看系统#xff0c;特别是在小屏模式下。 对于 screenfull 而言#xff0c;浏览器本身已经提供了对用的 API#xff0c;点击这里即可查看#xff0c;这个 API 中#xff0c;主要提供了两个…后台管理系统中有一个比较常见的功能就是全屏显示以方便用最大的屏幕查看系统特别是在小屏模式下。 对于 screenfull 而言浏览器本身已经提供了对用的 API点击这里即可查看这个 API 中主要提供了两个方法
1. Document.exitFullscreen()该方法用于请求从全屏模式切换到窗口模式
2. Element.requestFullscreen()该方法用于请求浏览器将特定元素置为全屏模式
但是该方法会存在一定的小问题比如有些区域背景颜色为黑色。
所以通常情况下我们不会直接使用该 API 来去实现全屏效果而是会使用它第三方库。
. 安装插件
npm i screenfull5.1.0. 封装组件
templatedivsvg-icon:iconisFullscreen ? exit-fullscreen : fullscreenclickonScreenToggle//div
/templatescript setup
import { ref, onMounted, onUnmounted } from vue;
import screenfull from screenfull;// 是否全屏
const isFullscreen ref(false);// 监听变化
const change () {isFullscreen.value screenfull.isFullscreen;
};// 切换事件
const onScreenToggle () {screenfull.toggle();
};// 设置侦听器
onMounted(() {screenfull.on(change, change);
});// 删除侦听器
onUnmounted(() {screenfull.off(change, change);
});
/scriptstyle langscss scoped/style3. 引入组件
