mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-09-09 04:12:14 +08:00
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<q-card style="width: 400px">
|
|
<q-card-section>
|
|
<div class="row q-gutter-md">
|
|
<div class="col-auto justify-center content-center flex q-pa-md">
|
|
<q-avatar square class="commandLogo">
|
|
<q-img
|
|
:src="features.icon"
|
|
@click="$refs.icon.showIconPicker = true"
|
|
/></q-avatar>
|
|
</div>
|
|
<div class="col">
|
|
<q-select
|
|
hide-dropdown-icon
|
|
label-color="primary"
|
|
transition-show="jump-down"
|
|
transition-hide="jump-up"
|
|
v-model="features.cmds"
|
|
max-values="3"
|
|
type="text"
|
|
placeholder="键入后回车"
|
|
use-input
|
|
use-chips
|
|
multiple
|
|
new-value-mode="add-unique"
|
|
input-debounce="0"
|
|
label="关键字"
|
|
@blur="features.cmds.length || features.cmds.push(currentTag)"
|
|
/>
|
|
<q-input
|
|
label-color="primary"
|
|
v-model="features.explain"
|
|
type="text"
|
|
placeholder="请输入描述"
|
|
label="描述"
|
|
@blur="features.explain || (features.explain = ' ')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions align="right">
|
|
<q-btn flat label="取消" color="grey" v-close-popup />
|
|
<q-btn flat label="确定" color="primary" v-close-popup @click="markTag" />
|
|
</q-card-actions>
|
|
<IconPicker
|
|
ref="icon"
|
|
@iconChanged="(dataUrl) => (features.icon = dataUrl)"
|
|
position="right"
|
|
/>
|
|
</q-card>
|
|
</template>
|
|
|
|
<script>
|
|
import IconPicker from "components/IconPicker";
|
|
|
|
export default {
|
|
components: { IconPicker },
|
|
data() {
|
|
return {
|
|
features: {
|
|
explain: `进入${this.currentTag}的面板视图`,
|
|
icon: "logo/quickcommand.png",
|
|
cmds: [this.currentTag],
|
|
platform: ["win32", "darwin", "linux"],
|
|
code: `panel_${window.hexEncode(this.currentTag)}`,
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
currentTag: String,
|
|
},
|
|
methods: {
|
|
markTag() {
|
|
this.$utools.whole.setFeature(_.cloneDeep(this.features));
|
|
this.$root.$refs.view.activatedQuickPanels.push(this.currentTag);
|
|
quickcommand.showMessageBox(
|
|
`主输入框输入『${this.features.cmds.join("、")}』即可直接进入『${
|
|
this.currentTag
|
|
}』的面板视图`
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|