mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-30 04:42:45 +08:00
3 个 ui 完善
This commit is contained in:
fofolee
parent
362cde8da7
commit
ec41728d0e
@ -92,86 +92,6 @@ quickcommand = {
|
||||
})
|
||||
},
|
||||
|
||||
// 显示输入框
|
||||
showInputBox: function(placeHolders = [""], title = '') {
|
||||
return new Promise((reslove, reject) => {
|
||||
if (!(placeHolders instanceof Array)) placeHolders = [placeHolders.toString()]
|
||||
utools.setExpendHeight(550)
|
||||
var html = ""
|
||||
var inputBoxNumbers = placeHolders.length
|
||||
for (let i = 0; i < inputBoxNumbers; i++) {
|
||||
html += `<input class="swal2-input" id="inputBox${i}" placeholder="${placeHolders[i]}">`
|
||||
}
|
||||
var result = []
|
||||
var options = {
|
||||
onBeforeOpen: () => {
|
||||
document.getElementById(`inputBox0`).focus()
|
||||
$('.swal2-content').keydown(function(e) {
|
||||
e.which == 13 && swal.clickConfirm()
|
||||
})
|
||||
$(".output").is(":parent") ? utools.setExpendHeight(550) : modWindowHeight($('.swal2-popup').outerHeight() + 20)
|
||||
},
|
||||
title: title,
|
||||
html: html,
|
||||
focusConfirm: false,
|
||||
showCancelButton: true,
|
||||
backdrop: utools.isDarkColors() ? '#ffffff26' : '#bbbbbb80',
|
||||
preConfirm: () => {
|
||||
for (let i = 0; i < inputBoxNumbers; i++) {
|
||||
result.push(document.getElementById(`inputBox${i}`).value)
|
||||
}
|
||||
reslove(result)
|
||||
}
|
||||
}
|
||||
swalOneByOne(options)
|
||||
});
|
||||
},
|
||||
|
||||
// 显示选项按钮
|
||||
showButtonBox: function(buttons, title = '') {
|
||||
return new Promise((reslove, reject) => {
|
||||
if (!(buttons instanceof Array)) return reject(new TypeError(`应为 Array, 而非 ${typeof buttons}`))
|
||||
utools.setExpendHeight(550)
|
||||
var html = ``
|
||||
var buttonBoxNumbers = buttons.length
|
||||
for (let i = 0; i < buttonBoxNumbers; i++) {
|
||||
html += `<button class="swal2-confirm swal2-styled" style="width: 80%" onclick="clickButton(${i})">${buttons[i]}</button>`
|
||||
}
|
||||
var options = {
|
||||
onBeforeOpen: () => {
|
||||
clickButton = i => {
|
||||
reslove({
|
||||
id: i,
|
||||
text: buttons[i]
|
||||
})
|
||||
swal.clickConfirm()
|
||||
}
|
||||
$(".output").is(":parent") && utools.setExpendHeight(550) || modWindowHeight($('.swal2-popup').outerHeight() + 20)
|
||||
},
|
||||
html: html,
|
||||
title: title,
|
||||
backdrop: utools.isDarkColors() ? '#ffffff26' : '#bbbbbb80',
|
||||
showConfirmButton: false
|
||||
}
|
||||
swalOneByOne(options)
|
||||
});
|
||||
},
|
||||
|
||||
// 显示自动消失的提示框
|
||||
showMessageBox: function(title, icon = "success", time = 3000) {
|
||||
var options = {
|
||||
icon: icon,
|
||||
title: title,
|
||||
toast: true,
|
||||
position: 'top',
|
||||
timer: time,
|
||||
showConfirmButton: false,
|
||||
// onBeforeOpen: () => {
|
||||
// setTimeout(() => { Swal.clickConfirm() }, time);
|
||||
// }
|
||||
}
|
||||
swal.fire(options)
|
||||
},
|
||||
|
||||
// 显示选项列表
|
||||
showSelectList: function(selects, opt = {}) {
|
||||
|
||||
55
src/components/quickcommandUI/ButtonBox.vue
Normal file
55
src/components/quickcommandUI/ButtonBox.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<q-dialog ref="dialog" @hide="onDialogHide">
|
||||
<q-card class="q-dialog-plugin">
|
||||
<q-card-section>
|
||||
<div class="text-h5" align="center" v-text="title"></div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-gutter-lg">
|
||||
<div v-for="(label, index) in labels" :key="index">
|
||||
<q-btn
|
||||
class="full-width"
|
||||
color="primary"
|
||||
:label="label"
|
||||
@click="onOKClick(label, index)"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
results: this.values,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
labels: Array,
|
||||
title: String,
|
||||
},
|
||||
emits: ["ok", "hide"],
|
||||
methods: {
|
||||
show() {
|
||||
this.$refs.dialog.show();
|
||||
},
|
||||
hide() {
|
||||
this.$refs.dialog.hide();
|
||||
},
|
||||
|
||||
onDialogHide() {
|
||||
this.$emit("hide");
|
||||
},
|
||||
|
||||
onOKClick(label, index) {
|
||||
this.$emit("ok", { id: index, text: label });
|
||||
this.hide();
|
||||
},
|
||||
|
||||
onCancelClick() {
|
||||
this.hide();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
69
src/components/quickcommandUI/TextArea.vue
Normal file
69
src/components/quickcommandUI/TextArea.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<q-dialog maximized ref="dialog" @hide="onDialogHide">
|
||||
<q-card class="q-dialog-plugin">
|
||||
<textarea
|
||||
v-model="result"
|
||||
:placeholder="placeholder"
|
||||
autofocus
|
||||
class="fixed"
|
||||
:style="{
|
||||
top: 0,
|
||||
bottom: '36px',
|
||||
left: 0,
|
||||
right: 0,
|
||||
background: '#00000000',
|
||||
color: $q.dark.isActive ? 'white' : 'black',
|
||||
fontSize: '16px',
|
||||
outline: 'none',
|
||||
}"
|
||||
/>
|
||||
<q-btn-group
|
||||
spread
|
||||
class="fixed-bottom"
|
||||
:style="{
|
||||
left: 0,
|
||||
right: 0,
|
||||
}"
|
||||
>
|
||||
<q-btn label="取消" color="negative" @click="onCancelClick" />
|
||||
<q-btn label="确定" color="primary" @click="onOKClick" />
|
||||
</q-btn-group>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result: this.value,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
placeholder: String,
|
||||
value: String,
|
||||
},
|
||||
emits: ["ok", "hide"],
|
||||
methods: {
|
||||
show() {
|
||||
this.$refs.dialog.show();
|
||||
},
|
||||
hide() {
|
||||
this.$refs.dialog.hide();
|
||||
},
|
||||
|
||||
onDialogHide() {
|
||||
this.$emit("hide");
|
||||
},
|
||||
|
||||
onOKClick() {
|
||||
this.$emit("ok", this.result);
|
||||
this.hide();
|
||||
},
|
||||
|
||||
onCancelClick() {
|
||||
this.hide();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -7,10 +7,12 @@ import {
|
||||
Dialog,
|
||||
Notify
|
||||
} from 'quasar'
|
||||
import inputBox from "../components/InputBox"
|
||||
import inputBox from "../components/quickcommandUI/InputBox"
|
||||
import buttonBox from "../components/quickcommandUI/ButtonBox"
|
||||
import TextArea from "../components/quickcommandUI/TextArea"
|
||||
|
||||
|
||||
let showInputBox = (options = [], title = "") => {
|
||||
let showInputBox = (options = ["请输入"], title = "") => {
|
||||
return new Promise((reslove, reject) => {
|
||||
let props = {
|
||||
labels: [],
|
||||
@ -32,6 +34,25 @@ let showInputBox = (options = [], title = "") => {
|
||||
})
|
||||
};
|
||||
|
||||
let showButtonBox = (labels = ["确定"], title = "") => {
|
||||
return new Promise((reslove, reject) => {
|
||||
if (!(labels instanceof Array)) return reject(new TypeError("必须为数组"))
|
||||
let props = {
|
||||
labels: labels,
|
||||
title: title
|
||||
}
|
||||
Dialog.create({
|
||||
component: buttonBox,
|
||||
componentProps: props
|
||||
}).onOk(results => {
|
||||
reslove(results)
|
||||
}).onCancel(() => {
|
||||
console.log('取消')
|
||||
})
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
let showConfirmBox = (message = "", title = "提示") => {
|
||||
return new Promise((reslove, reject) => {
|
||||
Dialog.create({
|
||||
@ -58,9 +79,28 @@ let showMessageBox = (message, icon = 'success', time = 3000) => {
|
||||
})
|
||||
}
|
||||
|
||||
let showTextArea = (placeholder = "", value = "") => {
|
||||
return new Promise((reslove, reject) => {
|
||||
let props = {
|
||||
placeholder: placeholder,
|
||||
value: value
|
||||
}
|
||||
Dialog.create({
|
||||
component: TextArea,
|
||||
componentProps: props
|
||||
}).onOk(results => {
|
||||
reslove(results)
|
||||
}).onCancel(() => {
|
||||
console.log('取消')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
showInputBox,
|
||||
showMessageBox,
|
||||
showConfirmBox
|
||||
showConfirmBox,
|
||||
showButtonBox,
|
||||
showTextArea
|
||||
};
|
||||
@ -13,7 +13,7 @@
|
||||
]
|
||||
},
|
||||
"program": "quickcommand",
|
||||
"cmd": "var snippet = {}\nquickcommand.showTextAera(\"请输入代码片段\").then(code => {\n snippet.body = code.split(\"\\n\")\n quickcommand.showInputBox([\"代码片段的描述\", \"触发代码片段的关键词\"])\n .then(inputs => {\n snippet.prefix = inputs[1]\n snippet.description = inputs[0]\n var result = `\"${inputs[0]}\": ` + JSON.stringify(snippet, null, '\\t')\n console.log(result)\n utools.copyText(result)\n quickcommand.showMessageBox('已复制')\n })\n})",
|
||||
"cmd": "var snippet = {}\nquickcommand.showTextArea(\"请输入代码片段\").then(code => {\n snippet.body = code.split(\"\\n\")\n quickcommand.showInputBox([\"代码片段的描述\", \"触发代码片段的关键词\"])\n .then(inputs => {\n snippet.prefix = inputs[1]\n snippet.description = inputs[0]\n var result = `\"${inputs[0]}\": ` + JSON.stringify(snippet, null, '\\t')\n console.log(result)\n utools.copyText(result)\n quickcommand.showMessageBox('已复制')\n })\n})",
|
||||
"output": "text",
|
||||
"hasSubInput": false,
|
||||
"scptarg": "",
|
||||
|
||||
@ -111,7 +111,7 @@ interface quickcommandApi {
|
||||
* @param placeholder 文本框占位符
|
||||
* @param value 默认的文本值
|
||||
*/
|
||||
showTextAera(placeholder?: string, value?: string): Promise<string>;
|
||||
showTextArea(placeholder?: string, value?: string): Promise<string>;
|
||||
|
||||
/**
|
||||
* 显示一个自动消失的提示框
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user