Merge pull request #102 from rubickCenter/feature/delkey

Feature/delkey
This commit is contained in:
璃白 2022-04-15 11:17:23 +08:00 committed by GitHub
commit 554b208f80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -35,7 +35,7 @@
<div <div
class="value" class="value"
tabIndex="-1" tabIndex="-1"
@keyup="(e) => changeShortCut(e, 'showAndHidden')" @keyup="e => changeShortCut(e, 'showAndHidden')"
> >
{{ shortCut.showAndHidden }} {{ shortCut.showAndHidden }}
</div> </div>
@ -94,20 +94,23 @@
<div class="feature-container"> <div class="feature-container">
<div class="keywords item"> <div class="keywords item">
<div>快捷键</div> <div>快捷键</div>
<template :key="index" v-for="(item, index) in global">
<a-tooltip placement="top" trigger="click"> <a-tooltip placement="top" trigger="click">
<template #title> <template #title>
<span>{{ tipText }}或按 F1-F12 单键 </span> <span>{{ tipText }}或按 F1-F12 单键 </span>
</template> </template>
<div <div
:key="index"
v-for="(item, index) in global"
class="value" class="value"
tabIndex="2" tabIndex="2"
@keyup="(e) => changeGlobalKey(e, index)" @keyup="e => changeGlobalKey(e, index)"
> >
{{ item.key }} {{ item.key }}
<MinusCircleOutlined
@click.stop="deleteGlobalKey(e, index)"
/>
</div> </div>
</a-tooltip> </a-tooltip>
</template>
</div> </div>
<div class="short-cut item"> <div class="short-cut item">
<div>功能关键字</div> <div>功能关键字</div>
@ -116,12 +119,16 @@
:value="item.value" :value="item.value"
v-for="(item, index) in global" v-for="(item, index) in global"
class="value" class="value"
allowClear
:disabled="!item.key" :disabled="!item.key"
@change="(e) => changeGlobalValue(index, e.target.value)" @change="e => changeGlobalValue(index, e.target.value)"
/> />
</div> </div>
</div> </div>
<div @click="addConfig" class="add-global">+ 新增全局快捷功能</div> <div @click="addConfig" class="add-global">
<PlusCircleOutlined />
新增全局快捷功能
</div>
</div> </div>
<Localhost v-if="currentSelect[0] === 'localhost'" /> <Localhost v-if="currentSelect[0] === 'localhost'" />
</div> </div>
@ -133,6 +140,8 @@ import {
ToolOutlined, ToolOutlined,
LaptopOutlined, LaptopOutlined,
DatabaseOutlined, DatabaseOutlined,
MinusCircleOutlined,
PlusCircleOutlined
} from "@ant-design/icons-vue"; } from "@ant-design/icons-vue";
import debounce from "lodash.debounce"; import debounce from "lodash.debounce";
import { ref, reactive, watch, toRefs, computed, toRaw } from "vue"; import { ref, reactive, watch, toRefs, computed, toRaw } from "vue";
@ -144,19 +153,19 @@ const { remote, ipcRenderer } = window.require("electron");
const examples = [ const examples = [
{ {
title: "快捷键 「 Alt + W」 关键字 「 微信」", title: "快捷键 「 Alt + W」 关键字 「 微信」",
desc: "按下Alt + W 直接打开本地微信应用", desc: "按下Alt + W 直接打开本地微信应用"
}, },
{ {
title: "快捷键 「 Alt + Q」 关键字 「 取色」", title: "快捷键 「 Alt + Q」 关键字 「 取色」",
desc: "按下Alt + Q 直接打开屏幕取色功能", desc: "按下Alt + Q 直接打开屏幕取色功能"
}, }
]; ];
const state = reactive({ const state = reactive({
shortCut: {}, shortCut: {},
common: {}, common: {},
local: {}, local: {},
global: [], global: []
}); });
const tipText = computed(() => { const tipText = computed(() => {
@ -180,9 +189,9 @@ const setConfig = debounce(() => {
perf: { perf: {
shortCut: state.shortCut, shortCut: state.shortCut,
common: state.common, common: state.common,
local: state.local, local: state.local
}, },
global: state.global, global: state.global
}) })
) )
); );
@ -240,10 +249,15 @@ const changeGlobalValue = (index, value) => {
state.global[index].value = value; state.global[index].value = value;
}; };
const deleteGlobalKey = (e, index) => {
state.global.splice(index, 1);
// delete state.global[index];
};
const addConfig = () => { const addConfig = () => {
state.global.push({ state.global.push({
key: "", key: "",
value: "", value: ""
}); });
}; };
@ -318,6 +332,19 @@ const { shortCut, common, local, global } = toRefs(state);
height: 24px; height: 24px;
font-weight: lighter; font-weight: lighter;
margin-top: 10px; margin-top: 10px;
position: relative;
&:hover {
.anticon {
display: block;
}
}
.anticon {
position: absolute;
display: none;
right: 4px;
top: 50%;
transform: translateY(-50%);
}
} }
} }
.add-global { .add-global {