首页 > 其他分享 >【vue3】实现全屏功能

【vue3】实现全屏功能

时间:2023-02-25 18:46:00浏览次数:69  
标签:core 功能 vueuse 实现 useFullscreen 全屏 vue3

前言

全屏效果:
image

实现

  1. 安装依赖包
npm i @vueuse/core
  1. 调用
import {useFullscreen} from '@vueuse/core'

useFullscreen 的使用文档:https://vueuse.org/core/useFullscreen/#usefullscreen
3. 实现代码

<el-tooltip content="全屏" effect="dark" placement="bottom">
   <el-icon class="icon-btn" @click="toggle">
     <full-screen v-if="!isFullscreen"/>
     <aim v-else/>
   </el-icon>
</el-tooltip>
<script setup>
	const {
	  isFullscreen, // 是否全屏状态
	  toggle
	} = useFullscreen()
</script>

标签:core,功能,vueuse,实现,useFullscreen,全屏,vue3
From: https://www.cnblogs.com/clownblogs/p/17155002.html

相关文章

  • 不添加额外功能是为了维护完整性
    今天改新应用程序时需要使用数据库的查找功能,需要匹配更具体的条件,听说正则表达式可以实现,但是我用的SQLite不支持这个功能,后来我用它的基本查找功能再加上自己写的代码解......
  • Vue3学习笔记(1)
    安装//使用yarn构建//安装yarn需要管理员权限sudonpmiyarn-gyarncreatevitecd..yarnyarndev目录结构见名知义四种......
  • 4G功能的边缘计算网关如何应用于储能行业
    随着储能行业的发展和完善,边缘计算网关的应用越来越广泛。钡铼技术发布全新带4G功能的边缘计算网关可以实现远程监控、数据采集、数据分析、智能控制等功能,可以实时监测储能......
  • vue3兄弟组件传参
    兄弟组件传参数mitt使用方式和vue2的事件大巴类似。安装npmimitt-S新建plugin/Bus.jsimportmittfrom'mitt'cosntemitter=mitt()exportdefaultemitterHome.vue<t......
  • vue3插槽
    父级组件中使用 ​​<A></A>​​并且不提供任何插槽内容时,子组件中 ​​<slot></slot>​​标签中的内容当作默认内容展示。v-slot只能添加在​​<template​​(一种情......
  • 《黑马旅游网》综合案例七 分类展示功能缓存
    对分类数据进行缓存优化分析发现,分类的数据在每一次页面加载后都会重新请求数据库来加载,对数据库的压力比较大,而且分类的数据不会经常产生变化,所有可以使用redis来缓存这......
  • 6_代理模式下开发各种功能-1_多种参数传递问题
     1单个基本数据类型2多个基本数据类型3单个引用数据类型4map集合数据类型5多个引用数据类型接口packagecom.msb.mapper;importcom.msb.pojo.Emp;importorg.apache.ibati......
  • 6_代理模式下开发各种功能-1_多种参数传递问题
     1单个基本数据类型2多个基本数据类型3单个引用数据类型4map集合数据类型5多个引用数据类型接口packagecom.msb.mapper;importcom.msb.pojo.Emp;importorg.apache.ibati......
  • 6_代理模式下开发各种功能-1_多种参数传递问题
    ​ 1单个基本数据类型2多个基本数据类型3单个引用数据类型4map集合数据类型5多个引用数据类型接口packagecom.msb.mapper;importcom.msb.pojo.Emp;importorg......
  • 6_代理模式下开发各种功能-1_多种参数传递问题
    ​ 1单个基本数据类型2多个基本数据类型3单个引用数据类型4map集合数据类型5多个引用数据类型接口packagecom.msb.mapper;importcom.msb.pojo.Emp;importorg......