需求:设置个按钮,点击后全屏展示,再次点击后退出全屏,就这样
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>
效果:
文章到此结束,希望对你有所帮助~