在顶部的工具栏中补充一个按钮，点它之后进行全屏展示。为了方便复用功能，把它注册成一个全局组件

1 创建组件

<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>

2 注册全局组件

       在 component/index.js ( 这个文件是我把需要全局注册的组件 集中注册,再在main.js 中 进行全局注册 ) 中进行全局组件注册

 2.1 component/index.js 代码如下:

import ScreenFull from './ScreenFull'
const componentsPlugin = {install(Vue) {// 省略其他...Vue.component('ScreenFull', ScreenFull)}
}

2.2  在main.js 中引入 component/index.js 并进行全局注册的代码如下:

 

3 安装组件

npm i screenfull

4 在全屏组件中引入

import screenfull from 'screenfull'

5 给icon 添加点击事件，在回调中使用使用插件的核心api

<svg-iconicon-class="fullscreen"class="fullscreen"
+  @click="toggleScreen"
/>

回调函数

toggleScreen () {screenfull.toggle()
}