全屏插件：screenfull.js的使用

全屏插件：screenfull.js的使用

1. npm install screenfull@^5.0.2 -- save

2. 在用到的组件中引入 import screenfull from 'screenfull'

   3.如果想控制全屏和推出全屏的样式，变量需要异步更新 在store中写如下代码：

Markup

import { createStore } from 'vuex'
export default createStore({
  state: {
    videoShow: false,
    isFullScreen: false
  },
  mutations: {

    toggleFullScreen(state, isFullScreen) {
      state.isFullScreen = isFullScreen;
    }
  },
  actions: {

    toggleFullScreen(context, isFullScreen) {
      context.commit('toggleFullScreen', isFullScreen)
    },
  },
  modules: {
  }
})

4.在页面引用

HTML:

Markup

<el-tooltip :content="isFullScreen ? '取消全屏' : '全屏展示'" placement="top" effect="light">
        <a
          href="javascript:"
          class="screen"
          :class