vue3全屏与退出全屏动态切换

需求：设置个按钮，点击后全屏展示，再次点击后退出全屏，就这样

1.找俩个图标，做全屏切换的点击切换样式

这边就不演示了，随便找什么样式的都行

2.使用插件

pinia+screenfull

npm install screenfull pinia -S

3.pinia导入

1.src目录下创建个store文件夹，并创建full.ts文件夹

在main.js中导入pinia

import { createPinia } from 'pinia'

app.use(createPinia())

full.ts文件内容，导入screefull全屏插件

//从pinia导入defineStore
import { defineStore } from "pinia";
import screenfull from "screenfull";
//使用defineStore对象创建一个状态管理，且进行默认导出
export default defineStore({
  //id： 只是一个标识，值必须是所有store中的唯一值，此id可以是defineStore的第一个实际参数
  id: "标识",
  //state方法，且方法返回一个对象，对象中时需要管理的状态信息
  state() {
    return {
      active: false,
      //属性：值,  //共享的状态
    };
  },
  //getters:与vuex中getters的使用方式一致，都是实现计算的方法
  getters: {
    计算方法名() {
      //使用this.state中的属性名  即可直接访问state中的数据
      return "值"; //此值为最终在组件中显示的值
    },
  },
  //actions：与vuex中的actions一致，都是用于存放异步修改state的方法的
  actions: {
    // 全屏和退出全屏切换
    toggle() {
      if (screenfull.isFullscreen) {
        screenfull.exit();
      } else {
        screenfull.request();
      }
      this.active = !this.active;
      console.log(this.active);
      //可以使用this.state中的属性名  直接访问state中的数据
    },
  },
});

4.做切换的vue文件

这边的我用的是阿里巴巴矢量图标，可以根据自己喜好换成别的都可以

<template>
  <el-tooltip
    effect="dark"
    :content="active ? '退出全屏' : '全屏'"
    placement="bottom"
  >
    <div @click="toggle()">
      <i class="iconfont icon-quxiaoquanping_o" v-if="active"></i>
      <i class="iconfont icon-quanping_o" v-else></i>
    </div>
    <el-icon v-if="active"><FullScreen /></el-icon>
  </el-tooltip>
</template>

<script setup lang="ts">
import PiniaActive from "@/store/modules/homeStore";
import { computed } from "vue";
const store = PiniaActive();
let { toggle } = store;
// 和pinia的值做双向绑定响应
const active = computed(() => store.active);
</script>
<style lang="scss" scoped>
.iconfont {
  font-size: 20px;
}
</style>

效果：

 文章到此结束，希望对你有所帮助~