加入“新标签页中打开”功能

This commit is contained in:
2021-05-04 19:18:57 +08:00
parent 44548744ac
commit 2e5b6c2a0e

View File

@@ -12,7 +12,7 @@
<!-- 工具项 --> <!-- 工具项 -->
<div v-for="(toolItem, toolKey) in categoryItem.list" :key="toolKey" <div v-for="(toolItem, toolKey) in categoryItem.list" :key="toolKey"
:class="['tool-item', 'shadow-2', { disabled: !toolItem.enabled }]" :class="['tool-item', 'shadow-2', { disabled: !toolItem.enabled }]"
@click="openDetail(categoryKey, toolKey)" @click="detailOpen(categoryKey, toolKey)"
> >
<div class="item-title limit-line-1">{{ toolItem.title }}</div> <div class="item-title limit-line-1">{{ toolItem.title }}</div>
<div class="item-content limit-line-3">{{ toolItem.desc || '无简介' }}</div> <div class="item-content limit-line-3">{{ toolItem.desc || '无简介' }}</div>
@@ -25,10 +25,20 @@
<!-- 弹出 --> <!-- 弹出 -->
<el-drawer custom-class="drawer-full" direction="btt" size="100%" <el-drawer custom-class="drawer-full" direction="btt" size="100%"
:append-to-body="true" :destroy-on-close="true" :title="detail.title" :append-to-body="true" :destroy-on-close="true" :title="detail.title"
:visible.sync="detail.show" :before-close="closeDetail" :visible.sync="detail.show" :before-close="detailClose"
> >
<!-- 内容 -->
<!-- 标题区域 -->
<div slot="title" class="header">
<span class="title">{{ detail.title }}</span>
<el-tooltip content="在新标签页中打开本工具" placement="left">
<i class="btn el-icon-copy-document" @click="detailOpenNewTab()"></i>
</el-tooltip>
</div>
<!-- 内容区域 -->
<router-view></router-view> <router-view></router-view>
</el-drawer> </el-drawer>
</el-container> </el-container>
@@ -52,9 +62,28 @@ export default {
methods: { methods: {
/** /**
* 打开工具 * 关闭工具
*/ */
openDetail(toolCatrgory, toolName) { detailClose(done) {
this.$confirm('是否关闭?').then(() => {
// 关闭 drawer
done();
// 路由跳转
this.$router.push({
name: 'Tools'
});
// 更新页面标题
this.utils.changeTitle('小工具');
}).catch(() => { });
},
/**
* 打开工具
*
* @param {string} toolCatrgory 工具分类
* @param {string} toolName 工具名称
*/
detailOpen(toolCatrgory, toolName) {
// 当前工具信息 // 当前工具信息
var info = {}; var info = {};
@@ -105,19 +134,12 @@ export default {
}, },
/** /**
* 关闭工具 * 打开工具(新标签页)
*/ */
closeDetail(done) { detailOpenNewTab() {
this.$confirm('是否关闭?').then(() => { var url = window.location.href;
// 关闭 drawer
done(); window.open(url, '_blank');
// 路由跳转
this.$router.push({
name: 'Tools'
});
// 更新页面标题
this.utils.changeTitle('小工具');
}).catch(() => { });
} }
}, },
@@ -128,7 +150,7 @@ export default {
// 判断进入的路由 // 判断进入的路由
if (route.name == 'ToolsDetail') { if (route.name == 'ToolsDetail') {
// 进入:工具内容页面 // 进入:工具内容页面
vm.openDetail(route.params.category, route.params.name); vm.detailOpen(route.params.category, route.params.name);
} else { } else {
// 进入:工具列表页面 // 进入:工具列表页面
vm.utils.changeTitle('小工具'); vm.utils.changeTitle('小工具');
@@ -206,4 +228,18 @@ export default {
} }
} }
} }
.drawer-full {
.header {
display: flex;
align-items: center;
justify-content: space-between;
.btn {
margin: 0 0.5rem;
font-size: inherit;
cursor: pointer;
}
}
}
</style> </style>