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

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>