关于 vue 中双击图或表全屏放大功能

直接上图：

没有双击前的 table 表格

双击后的 table 效果图

没有双击前的图，我这里用的是 echarts 的一个简单的示例

双击后的效果

看完图直接上代码

表格

需要引入封装好的 FullScreen.js 文件，引入的时候注意文件路径
在表格上定义一个双击事件 @dblclick，通过双击获取表格的id值
传入到 initTable 这个方法里
封装好的 FullScreen.js 文件，放在了文章的最下边

<template>
  <div>
    <el-table @dblclick="initTables" id="myTable" :data="tableData">
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="性别" prop="sex"/>
    </el-table>
  </div>
</template>

<script>
import { initTable } from '@/assets/js/FullScreen'
export default {
  data () {
    return {
      tableData: [
        {
          name: '张三',
          sex: '男'
        },
        {
          name: '貂蝉',
          sex: '女'
        }
      ]
    }
  },
  methods: {
    initTables () {
      const element = document.getElementById('myTable')
      initTable(element)
    }

  }
}
</script>
<style scoped>
#myTable{
  width: 500px;
  height: 200px;
  cursor: pointer;
}
</style>

echarts 图

与表格的定义一样，定义双击事件@dblclick

<template>
  <div ref="myChart" id="container" @dblclick="initTables"></div>
</template>

<script>
import { initTable } from '@/assets/js/FullScreen'
export default {
  data () {
    return {
    }
  },
  methods: {
    initTables () {
      const element = document.getElementById('container')
      initTable(element)
    },
    showEcharts () {
      const myChart = this.$echarts.init(this.$refs.myChart, 'dark', {
        renderer: 'canvas',
        useDirtyRect: false
      })
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      })

      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }

  },
  mounted () {
    this.showEcharts()
  }
}
</script>
<style scoped>
#container{
  height: 50%;
  width: 50%;
}
</style>

FullScreen.js 文件相关代码

export function initTable (element) {
  if (!document.fullscreenElement) {
    enterFullScreen(element)
  } else {
    exitFullScreen()
  }
}
export function enterFullScreen (element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) { /* Firefox */
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) { /* IE/Edge */
    element.msRequestFullscreen()
  }
}

export function exitFullScreen () {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen()
  }
}