showInputBox更新

This commit is contained in:
fofolee 2022-03-31 20:24:52 +08:00
parent f6b8bb2a8d
commit 4d07847196
3 changed files with 294 additions and 254 deletions

View File

@ -29,13 +29,14 @@
export default { export default {
data() { data() {
return { return {
results: new Array(this.labels.length), results: this.values,
}; };
}, },
props: { props: {
labels: Array, labels: Array,
title: String, title: String,
hints: Array hints: Array,
values: Array
}, },
emits: ["ok", "hide"], emits: ["ok", "hide"],
methods: { methods: {

33
src/js/quickcommand.js Normal file
View File

@ -0,0 +1,33 @@
/**
* 通过quickcommand的api快速生成可交互的UI界面
* UI界面基于quasar
*/
import {
Dialog
} from 'quasar'
import inputBox from "../components/InputBox"
let showInputBox = (options = [], title = "") => {
return new Promise((reslove, reject) => {
let props = {}
if (!(options instanceof Object)) return reject(new TypeError("必须为数组或对象"))
if (options instanceof Array) props.labels = options
else props = options
if (!props.values) props.values = options.map(() => "")
if (!props.hints) props.hints = options.map(() => "")
Dialog.create({
component: inputBox,
componentProps: props
}).onOk(results => {
reslove(Array.from(results))
}).onCancel(() => {
console.log('取消')
}).onDismiss(() => {
console.log('对话框被关闭')
})
})
};
export default {
showInputBox,
};

View File

@ -1,274 +1,280 @@
interface quickcommandApi { interface quickcommandApi {
/** /**
* *
* *
* ```js * ```js
* quickcommand.showButtonBox(["按钮1", "按钮2", "按钮3"]).then(({ id, text }) => { * quickcommand.showButtonBox(["按钮1", "按钮2", "按钮3"]).then(({ id, text }) => {
* console.log(`选择了第${id+1}个按钮`) * console.log(`选择了第${id+1}个按钮`)
* console.log(`按钮的文本为${text}`) * console.log(`按钮的文本为${text}`)
* }) * })
* ``` * ```
* *
* @param buttons * @param buttons
* @param title * @param title
*/ */
showButtonBox(buttons: array, title?: string): Promise<{ id: number, text: string }>; showButtonBox(buttons: array, title?: string): Promise<{ id: number, text: string }>;
/** /**
* *
* *
* ```js * ```js
* quickcommand.showInputBox(["输入框1", "输入框2", "输入框3"]).then(values => { * quickcommand.showInputBox(["输入框1", "输入框2", "输入框3"]).then(values => {
* console.log(`输入的内容分别为${values}`) * console.log(`输入的内容分别为${values}`)
* }) * })
* ``` *
* * quickcommand.showInputBox({labels:["输入框标签"],values:["默认值"],hints:["输入框提示"]}).then(values => {
* @param labels * console.log(`输入的内容分别为${values}`)
* @param title * })
*/ * ```
showInputBox(labels: array, title?: string): Promise<array>; *
*
*
* @param options
* @param title
*/
showInputBox(options: array | { labels: array, values: array, hints: array }, title?: string): Promise<array>;
/** /**
* *
* *
* ```js * ```js
* // plaintext * // plaintext
* var opt = [] * var opt = []
* for (var i = 0; i < 15; i++) { * for (var i = 0; i < 15; i++) {
* // 每一个选项为文本格式 * // 每一个选项为文本格式
* opt.push(`选项` + i) * opt.push(`选项` + i)
* } * }
* quickcommand.showSelectList(opt).then(choise => { * quickcommand.showSelectList(opt).then(choise => {
* console.log(`选择的选项为${choise.text}`) * console.log(`选择的选项为${choise.text}`)
* }) * })
* *
* // json * // json
* var opt = [] * var opt = []
* for (var i = 0; i < 15; i++) { * for (var i = 0; i < 15; i++) {
* // 每一个选项为 json 格式 * // 每一个选项为 json 格式
* opt.push({title: `选项${i}`, description: `选项${i}的描述`, abcd: `选项${i}的自定义属性`}) * opt.push({title: `选项${i}`, description: `选项${i}的描述`, abcd: `选项${i}的自定义属性`})
* } * }
* quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => { * quickcommand.showSelectList(opt, {optionType: 'json'}).then(choise => {
* console.log(`选择的选项为${choise.title}`) * console.log(`选择的选项为${choise.title}`)
* }) * })
* *
* // html * // html
* var opt = [] * var opt = []
* for (var i = 0; i < 15; i++) { * for (var i = 0; i < 15; i++) {
* // 每一个选项为 html 格式 * // 每一个选项为 html 格式
* opt.push(`<div style="color: red">选项${i}</div>`) * opt.push(`<div style="color: red">选项${i}</div>`)
* } * }
* quickcommand.showSelectList(opt, {optionType: 'html'}).then(choise => { * quickcommand.showSelectList(opt, {optionType: 'html'}).then(choise => {
* console.log(`选择的选项为${quickcommand.htmlParse(choise.text).body.innerText}`) * console.log(`选择的选项为${quickcommand.htmlParse(choise.text).body.innerText}`)
* }) * })
* ``` * ```
* *
* @param selects * @param selects
* @param options placeholder: 搜索框占位符,optionType: 选项的格式plaintext * @param options placeholder: 搜索框占位符,optionType: 选项的格式plaintext
*/ */
showSelectList(selects: array, options?: { placeholder: string, optionType: 'plaintext' | 'html' | 'json' }): Promise<{ id: number, text: string }>; showSelectList(selects: array, options?: { placeholder: string, optionType: 'plaintext' | 'html' | 'json' }): Promise<{ id: number, text: string }>;
/** /**
* *
* *
* ```js * ```js
* // 初始状态只有 1、2、3 三个选项 * // 初始状态只有 1、2、3 三个选项
* quickcommand.showSelectList(['1','2','3']).then(x=>{ * quickcommand.showSelectList(['1','2','3']).then(x=>{
* console.log(x) * console.log(x)
* }) * })
* *
* // 1s 后追加一个选项 * // 1s 后追加一个选项
* quickcommand.setTimeout(()=>{ * quickcommand.setTimeout(()=>{
* quickcommand.updateSelectList('4') * quickcommand.updateSelectList('4')
* }, 1000) * }, 1000)
* *
* // 2s 后更新第二个选项的值 * // 2s 后更新第二个选项的值
* quickcommand.setTimeout(()=>{ * quickcommand.setTimeout(()=>{
* quickcommand.updateSelectList('updated', 1) * quickcommand.updateSelectList('updated', 1)
* }, 2000) * }, 2000)
* ``` * ```
* *
* @param opt * @param opt
* @param id * @param id
*/ */
updateSelectList(opt: string, id?: number): void; updateSelectList(opt: string, id?: number): void;
/** /**
* *
* *
* ```js * ```js
* quickcommand.showTextAera("请输入文本").then(text=>{ * quickcommand.showTextAera("请输入文本").then(text=>{
* console.log(`输入的文本为${text}`) * console.log(`输入的文本为${text}`)
* }) * })
* ``` * ```
* *
* @param placeholder * @param placeholder
* @param value * @param value
*/ */
showTextAera(placeholder?: string, value?: string): Promise<string>; showTextAera(placeholder?: string, value?: string): Promise<string>;
/** /**
* *
* *
* ```js * ```js
* quickcommand.showMessageBox("这是一段3s后自动消失的成功提示") * quickcommand.showMessageBox("这是一段3s后自动消失的成功提示")
* ``` * ```
* @param message * @param message
* @param icon success * @param icon success
* @param time 3000 * @param time 3000
*/ */
showMessageBox(message: string, icon?: 'success' | 'error' | 'warning' | 'info' | 'question', time?: number): void; showMessageBox(message: string, icon?: 'success' | 'error' | 'warning' | 'info' | 'question', time?: number): void;
/** /**
* *
* *
* ```js * ```js
* quickcommand.showConfirmBox().then(confirmed => { * quickcommand.showConfirmBox().then(confirmed => {
* confirmed && console.log('点击了确定') * confirmed && console.log('点击了确定')
* }) * })
* ``` * ```
* @param title * @param title
*/ */
showConfirmBox(title?: string): Promise<boolean>; showConfirmBox(title?: string): Promise<boolean>;
/** /**
* *
* @param ms * @param ms
*/ */
sleep(ms: number): void; sleep(ms: number): void;
/** /**
* *
* *
* ```js * ```js
* quickcommand.setTimeout(()=>{ * quickcommand.setTimeout(()=>{
* console.log('2000毫秒后执行') * console.log('2000毫秒后执行')
* }, 2000) * }, 2000)
* ``` * ```
* *
* @param ms * @param ms
*/ */
setTimeout(callback: () => void, ms) setTimeout(callback: () => void, ms)
/** /**
* html字符串解析为 DOM * html字符串解析为 DOM
* *
* ```js * ```js
* var html = `<a href="https://u.tools/">uTools</a>` * var html = `<a href="https://u.tools/">uTools</a>`
* var href = quickcommand.htmlParse(html).querySelector('a').href * var href = quickcommand.htmlParse(html).querySelector('a').href
* console.log(`解析出来的a标签地址为${href}`) * console.log(`解析出来的a标签地址为${href}`)
* ``` * ```
* *
* @param html html * @param html html
*/ */
htmlParse(html: string): object htmlParse(html: string): object
/** /**
* Buffer * Buffer
* *
* ```js * ```js
* // 下载文件到D:/ * // 下载文件到D:/
* quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe', 'D:/') * quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe', 'D:/')
* *
* // 下载文件,并弹出对话框询问保存路径 * // 下载文件,并弹出对话框询问保存路径
* quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe') * quickcommand.downloadFile('https://res.u-tools.cn/currentversion/uTools-1.1.3.exe')
* ``` * ```
* *
* @param url * @param url
* @param file * @param file
* *
* Object时 options utools.showSaveDialog options一致 * Object时 options utools.showSaveDialog options一致
*/ */
downloadFile(url, file?: string | object): Promise<Buffer> downloadFile(url, file?: string | object): Promise<Buffer>
/** /**
* *
* *
* ```js * ```js
* // 上传图片到图床 * // 上传图片到图床
* quickcommand.uploadFile("https://imgkr.com/api/v2/files/upload", "C:\\test.jpg").then(res=>{ * quickcommand.uploadFile("https://imgkr.com/api/v2/files/upload", "C:\\test.jpg").then(res=>{
* console.log('上传成功,图片地址为:' + res.data.data) * console.log('上传成功,图片地址为:' + res.data.data)
* }) * })
* *
* // 包含额外表单数据 * // 包含额外表单数据
* quickcommand.uploadFile("https://catbox.moe/user/api.php", "C:\\test.jpg", 'fileToUpload', { * quickcommand.uploadFile("https://catbox.moe/user/api.php", "C:\\test.jpg", 'fileToUpload', {
* "reqtype": "fileupload" * "reqtype": "fileupload"
* }).then(res=>{ * }).then(res=>{
* console.log('上传成功,图片地址为:' + res.data) * console.log('上传成功,图片地址为:' + res.data)
* }) * })
* ``` * ```
* *
* @param url * @param url
* @param file * @param file
* *
* Object时 options utools.showOpenDialog options一致 * Object时 options utools.showOpenDialog options一致
* *
* @param name file * @param name file
* @param formData * @param formData
*/ */
uploadFile(url: string, file?: string | object, name?: string, formData?: object): Promise<object> uploadFile(url: string, file?: string | object, name?: string, formData?: object): Promise<object>
/** /**
* export * export
* *
* ```js * ```js
* let remote = 'https://cdn.jsdelivr.net/npm/sweetalert2@9' * let remote = 'https://cdn.jsdelivr.net/npm/sweetalert2@9'
* quickcommand.loadRemoteScript(remote).then(swal => { * quickcommand.loadRemoteScript(remote).then(swal => {
* swal.fire('已加载 sweetalert2 并成功弹窗') * swal.fire('已加载 sweetalert2 并成功弹窗')
* }) * })
* ``` * ```
* *
* @param url * @param url
*/ */
loadRemoteScript(url: string): Promise<object> loadRemoteScript(url: string): Promise<object>
/** /**
* signal pid , process.kill * signal pid , process.kill
* @param pid ID * @param pid ID
* @param signal SIGTERM * @param signal SIGTERM
*/ */
kill(pid: number, signal?: number | string): void kill(pid: number, signal?: number | string): void
/** /**
* windows VBS * windows VBS
* *
* ```js * ```js
* quickcommand.runVbs(`CreateObject("SAPI.SpVoice").Speak"Hello"`) * quickcommand.runVbs(`CreateObject("SAPI.SpVoice").Speak"Hello"`)
* ``` * ```
* *
* @param script VBS * @param script VBS
*/ */
runVbs(script: string): Promise<string> runVbs(script: string): Promise<string>
/** /**
* utools.onPluginEnter code type payload * utools.onPluginEnter code type payload
* *
* code: 唯一标识 * code: 唯一标识
* *
* type: text | img | files | regex | over | window * type: text | img | files | regex | over | window
* *
* payload: 当匹配模式为关键字时 * payload: 当匹配模式为关键字时
* *
* ```js * ```js
* if (quickcommand.enterData.type == 'regex'){ * if (quickcommand.enterData.type == 'regex'){
* var text = quickcommand.enterData.payload * var text = quickcommand.enterData.payload
* console.log(`主输入框匹配的文本为${text}`) * console.log(`主输入框匹配的文本为${text}`)
* } * }
* ``` * ```
* *
*/ */
enterData: { code: string, type: string, payload: any } enterData: { code: string, type: string, payload: any }
/** /**
* *
*/ */
simulateCopy() simulateCopy()
/** /**
* *
*/ */
simulatePaste() simulatePaste()
} }
declare var quickcommand: quickcommandApi; declare var quickcommand: quickcommandApi;