feat(工具箱): 实现“新窗口中打开”工具
This commit is contained in:
@@ -255,13 +255,13 @@ export const toolList = [
|
||||
{
|
||||
id: 'open-new-window',
|
||||
component: 'Other/OpenNewWindow',
|
||||
title: '新窗口(小窗)中打开',
|
||||
title: '新窗口中打开',
|
||||
iconClass: 'mdi mdi-window-maximize',
|
||||
desc: '从新的小窗口中打开指定的链接(仅支持 PC 端浏览器)',
|
||||
createdAt: '',
|
||||
updatedAt: '',
|
||||
version: '0',
|
||||
enabled: false,
|
||||
createdAt: '2025-02-04',
|
||||
updatedAt: '2025-02-04',
|
||||
version: '1',
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
id: 'run-javascript',
|
||||
|
@@ -1,9 +1,105 @@
|
||||
<template>
|
||||
<div class="tool-detail-page"></div>
|
||||
<div class="tool-detail-page">
|
||||
|
||||
<!-- 设置 -->
|
||||
<n-card size="small" title="设置">
|
||||
<n-form
|
||||
class="form-no-feedback config-inputs"
|
||||
label-align="left"
|
||||
label-placement="left"
|
||||
label-width="auto"
|
||||
@contextmenu.stop
|
||||
>
|
||||
|
||||
<n-form-item label="目标链接:">
|
||||
<n-input
|
||||
v-model:value="data.url"
|
||||
placeholder="请输入需要打开的 URL,需要包含协议部分(https://)"
|
||||
type="text"
|
||||
></n-input>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="窗口大小:">
|
||||
<n-flex align="center">
|
||||
<span>宽度</span>
|
||||
<n-input-number
|
||||
v-model:value="data.width"
|
||||
:min="0"
|
||||
:max="9999999"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
></n-input-number>
|
||||
<span>高度</span>
|
||||
<n-input-number
|
||||
v-model:value="data.height"
|
||||
:min="0"
|
||||
:max="9999999"
|
||||
:precision="0"
|
||||
:step="1"
|
||||
></n-input-number>
|
||||
</n-flex>
|
||||
</n-form-item>
|
||||
|
||||
</n-form>
|
||||
</n-card>
|
||||
|
||||
<!-- 操作 -->
|
||||
<n-card size="small" title="操作">
|
||||
<n-flex>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="openWindow"
|
||||
>打开窗口</n-button>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
NButton, NCard, NCode, NFlex,
|
||||
NForm, NFormItem,
|
||||
NInput, NInputNumber, NSwitch,
|
||||
} from 'naive-ui';
|
||||
|
||||
import {
|
||||
reactive,
|
||||
} from 'vue';
|
||||
|
||||
/** 数据 */
|
||||
const data = reactive({
|
||||
url: '',
|
||||
width: 400,
|
||||
height: 300,
|
||||
});
|
||||
|
||||
/** 打开窗口 */
|
||||
function openWindow() {
|
||||
|
||||
var link = data.url || 'https://github.com/Frost-ZX';
|
||||
var width = data.width ?? 400;
|
||||
var height = data.height ?? 300;
|
||||
var features = `height=${height}, width=${width}, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=yes, status=yes`;
|
||||
|
||||
window.open(link, '_blank', features);
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.config-inputs {
|
||||
.n-input-number {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.n-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-form-item-blank) {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user