vue 全屏功能组件(screenfull)的使用

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

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-icon
   icon-class="fullscreen"
   class="fullscreen"
+  @click="toggleScreen"
/>

回调函数

toggleScreen () {
   screenfull.toggle()
}