如何在vue3+ts中使用screenfull插件&如何在vue3的setup中获取页面元素ref

最新推荐文章于 2025-03-08 09:18:49 发布

YanzYan

最新推荐文章于 2025-03-08 09:18:49 发布

阅读量954

点赞数

分类专栏：干了这碗前端酒文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YanzYan/article/details/121269006

版权

干了这碗前端酒专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用screenfull库实现点击按钮进行全屏切换的功能。通过`ref`获取元素并检查屏幕支持情况，调用toggle方法实现全屏与正常视图的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm i  screenfull@4.2.0 -D

vue文件中

<template>
  <div>
    <el-button @click="isScreenFull" size="mini">全屏</el-button>
  </div>
</template>

<script lang="ts">
  import screenfull from 'screenfull'
  export default defineComponent({
	setup() {
	  	const main = ref() // 需要被放大的元素 vue3中获取页面元素 命名必须和定义的ref一致 然后在需要的地方使用value属性获取
	    const isScreenFull = () => {
	      // !screenfull.enabled 或 !screenfull.isEnabled
	      if (!(screenfull as any).enabled) {
	        // 不支持进入全屏
	        return false
	      }
	      (screenfull as any).toggle(main.value) // 如果是像F11一样放大整个区域 则不需要传参 直接使用toggle()
	    }
	    return {
	      isScreenFull, // 所有需要被访问的方法和属性都需要return
	      main,
	    }
	  }
  })
</script>