增加showInputBox Api

This commit is contained in:
fofolee 2022-03-30 11:57:59 +08:00
parent 3180596754
commit 8349b791fe
4 changed files with 91 additions and 1 deletions

View File

@ -105,7 +105,7 @@ module.exports = configure(function (ctx) {
// directives: [],
// Quasar plugins
plugins: []
plugins: ['Dialog']
},
// animations: 'all', // --- includes all animations

24
src/api/quickcommand.js Normal file
View File

@ -0,0 +1,24 @@
import { Dialog } from 'quasar'
import inputBox from "../components/InputBox"
let showInputBox = (labels = [], title = "", hints = []) => {
return new Promise((reslove, reject) => {
Dialog.create({
component: inputBox,
componentProps: {
labels: labels,
title: title,
hints: hints
}
}).onOk(results => {
reslove(Array.from(results))
}).onCancel(() => {
console.log('取消')
}).onDismiss(() => {
console.log('对话框被关闭')
})
})
};
export default {
showInputBox,
};

View File

@ -0,0 +1,63 @@
<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-sm">
<div v-for="(label, index) in labels" :key="index">
<q-input
outlined
v-model="results[index]"
:label="label"
:hint="hints[index]"
hide-hint
autofocus
@keyup.enter="onOKClick"
/>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn color="primary" label="确定" @click="onOKClick" />
<q-btn color="primary" label="取消" @click="onCancelClick" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
data() {
return {
results: new Array(this.labels.length),
};
},
props: {
labels: Array,
title: String,
hints: Array
},
emits: ["ok", "hide"],
methods: {
show() {
this.$refs.dialog.show();
},
hide() {
this.$refs.dialog.hide();
},
onDialogHide() {
this.$emit("hide");
},
onOKClick() {
this.$emit("ok", this.results);
this.hide();
},
onCancelClick() {
this.hide();
},
},
};
</script>

View File

@ -1,6 +1,9 @@
import { route } from 'quasar/wrappers'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'
import quickcommand from '../api/quickcommand'
window.quickcommand = quickcommand
/*
* If not building with SSR mode, you can