2022-04-07 23:53:22 +08:00

65 lines
1.3 KiB
Vue

<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="blue-9" label="确定" @click="onOKClick" />
<q-btn color="negative" label="取消" @click="onCancelClick" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
data() {
return {
results: this.values,
};
},
props: {
labels: Array,
title: String,
hints: Array,
values: 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>