本意是想通过点击button实现div元素的全屏(覆盖边栏和顶部导航栏),但由于是模块内,无法控制全局显示,又不想在组件间传值搞得太复杂,于是通过路由跳转的方式实现。

在div定义一个最大化的按钮:

      <el-tooltip :content="tips" placement="top">
        <el-button @click="go">
          <el-icon><full-screen /></el-icon>
        </el-button>
      </el-tooltip>

引入路相关模块:

import { FullScreen } from '@element-plus/icons'
import router from '../../router'
import { useRoute } from 'vue-router'

setup配置:

  setup() {
    const route = useRoute()
    return { route }
  },

计算属性:

  computed: {
    tips() {
      if (this.route.path === '/traffic_full_display') {
        return 'Cancel Full Screen'
      } else {
        return 'Full Screen'
      }
    },
  },

方法:

  methods: {
    go() {
      if (this.route.path === '/traffic_full_display') {
        router.push('/abstract_info')
      } else {
        router.push('/traffic_full_display')
      }
    },
  },

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐