vue3 通过点击按钮实现页面跳转
本意是想通过点击button实现div元素的全屏(覆盖边栏和顶部导航栏),但由于是模块内,无法控制全局显示,又不想在组件间传值搞得太复杂,于是通过路由跳转的方式实现。在div定义一个最大化的按钮:<el-tooltip :content="tips" placement="top"><el-button @click="go"><el-icon><full
·
本意是想通过点击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')
}
},
},
更多推荐
已为社区贡献1条内容
所有评论(0)