1.下载插件 screenfull
npm i [email protected]
2.封装全屏显示的插件
<template>
<!-- 放置一个图标 -->
<div>
<!-- 放置一个svg的图标 -->
<svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" />
</div>
</template>
<script>
import ScreenFull from 'screenfull'
export default {
methods: {
changeScreen() {
if (!ScreenFull.isEnabled) {
this.$message.warning('此时全屏组件不可用')
return
}
ScreenFull.toggle()
}
}
}
</script>
<style>
</style>
3.全局注册插件
import ScreenFull from './ScreenFull'
Vue.component('ScreenFull', ScreenFull)
4.使用插件