（1）使用screenfull来解决全屏操作

（2）利用监听事件，禁用F11操作的全屏，只有由页面“全屏”按钮才能出发全屏；

（3）利用监听事件，来改变isFullscreen的值，进而控制页面展示“全屏”图标，还是“退出全屏”图标

1、安装使用screenfull.js

npm install --save screenfull
2、在相应的组件引入screenful，我的js部分的代码如下：
<script>
import screenfull from 'screenfull'
export default {
  data() {
    return {
      isFullscreen: false // false非全屏状态、true全屏状态
  created() {
    // 监听事件
    window.addEventListener('resize', this.onresize)
    window.addEventListener('keydown', this.keydown)
  beforeDestroy() {
    // 取消监听事件
    window.removeEventListener('resize', this.onresize)
    window.removeEventListener('keydown', this.keydown)
  methods: {
    // 切换是否全屏
    toggleFullscreen(isFscreen) {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        return false
      screenfull.toggle()
      this.isFullscreen = isFscreen
    // 阻止F11默认事件
    keydown(event) {
      if (event.keyCode === 122) {
        event.preventDefault()
        event.returnValue = false
     * 响应屏幕变化事件，给isFullscreen赋值，标识是否全屏
     * IE中bug: 调试器打开，且与页面不分离时 -- 无效
     * **/
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      let winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen
      if (isFull === undefined) {
        this.isFullscreen = winFlag
      } else {
        this.isFullscreen = winFlag || isFull
      console.log('winFlag || isFull', winFlag, isFull)
</script>