Переход на quasar

This commit is contained in:
Book Pauk
2020-02-25 21:07:12 +07:00
parent 01bd15121b
commit efd4fbad70
2 changed files with 58 additions and 10 deletions

View File

@@ -1,7 +1,8 @@
<template>
<q-dialog ref="dialog" v-model="active" @hide="onHide">
<q-dialog ref="dialog" v-model="active" @show="onShow" @hide="onHide">
<slot></slot>
<!--------------------------------------------------->
<div v-show="type == 'alert'" class="column bg-white">
<div class="header row">
<div class="caption col row items-center q-ml-md">
@@ -24,6 +25,7 @@
</div>
</div>
<!--------------------------------------------------->
<div v-show="type == 'confirm'" class="column bg-white">
<div class="header row">
<div class="caption col row items-center q-ml-md">
@@ -46,6 +48,31 @@
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
</div>
</div>
<!--------------------------------------------------->
<div v-show="type == 'prompt'" class="column bg-white">
<div class="header row">
<div class="caption col row items-center q-ml-md">
<q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
<div v-html="caption"></div>
</div>
<div class="close-icon column justify-center items-center">
<q-btn flat round dense v-close-popup>
<q-icon name="la la-times" size="18px"></q-icon>
</q-btn>
</div>
</div>
<div class="col q-mx-md">
<div v-html="message"></div>
<q-input ref="input" outlined dense v-model="inputValue"/>
</div>
<div class="buttons row justify-end q-pa-md">
<q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
</div>
</div>
</q-dialog>
</template>
@@ -63,6 +90,7 @@ class StdDialog extends Vue {
message = '';
active = false;
type = '';
inputValue = '';
created() {
if (this.$root.addKeyHook) {
@@ -85,6 +113,12 @@ class StdDialog extends Vue {
}
}
onShow() {
if (this.type == 'prompt') {
this.$refs.input.focus();
}
}
okClick() {
this.ok = true;
}
@@ -123,6 +157,25 @@ class StdDialog extends Vue {
});
}
prompt(message, caption, opts) {
return new Promise((resolve) => {
this.init(message, caption);
this.hideTrigger = () => {
if (this.ok) {
resolve(true);
} else {
resolve(false);
}
};
this.type = 'prompt';
this.inputValue = opts.inputValue || '';
this.inputValidator = opts.inputValidator || null;
this.active = true;
});
}
keyHook(event) {
if (this.active && event.code == 'Enter') {
this.okClick();