携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情
大家好,我是大帅子,讲讲在vue的项目中实现全屏吧,其实很简单,跟着流程走,都是固定的用法,OK,我们接下来开始吧
1.分析
- 我们可以把全屏的注册成组件
- 直接在组件里面实现功能
2. 注册一个组件
公共组件 src/component/Fullscreen
<template>
<!-- 放置一个图标 -->
<div style="display:inline-block">
<svg-icon icon-class="fullscreen" class="fullscreen"/>
</div>
</template>
<script>
export default {
name: 'ScreenFull',
}
</script>
<style lang="scss" scoped>
.fullscreen {
width: 20px;
height: 20px;
color: #fff;
cursor: pointer;
}
</style>
3. 下包
yarn add screenfull@5.2.0
4. 使用
这里我就不带大家去看官网了,
<template>
<!-- 放置一个图标 -->
<div style="display:inline-block">
<svg-icon
icon-class="fullscreen"
class="fullscreen"
+ @click="toggleScreen" />
</div>
</template>
<script>
+ import screenfull from 'screenfull'
export default {
name: 'ScreenFull',
methods: {
+ toggleScreen() {
+ screenfull.toggle()
+ }
}
}
</script>
<style lang="scss" scoped>
.fullscreen {
width: 20px;
height: 20px;
color: #fff;
cursor: pointer;
}
</style>
5. 修改图标
我们就是需要默认的时候 ,就是第一个图标,然后 ,全屏就是另外一个图标
<svg-icon
+ :icon-class="flag?'exit-fullscreen': 'fullscreen'"
class="fullscreen"
@click="toggleScreen"
/>
data() {
return {
flag: false
}
},
methods: {
toggleScreen() {
screenfull.toggle()
this.flag = !this.flag
}
}
6. 有一个bug
当我们点击esc的时候,这个图标并不会变化,这个时候我们这个包里面有一个事件监听
created() {
// ESC会改变当前的全屏状态
// screenfull是插件，它自带事件监听 on
// screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
screenfull.on('change', () => {
console.log('当前是否是全屏', screenfull.isFullscreen)
this.flag = screenfull.isFullscreen
})
},
OK 我们的功能就完成了
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅 还需努力!大家一起进步!!!
