如何在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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值