instant-vuetify-overlays
Description
- Utility for
https://vuetifyjs.com
- programmable snackbar, dialog, progress component
Instalation
npm install --save instant-vuetify-overlays
import Vue from 'vue';
import Vuetify from 'vuetify';
import InstantVuetifyOverlays from 'instant-vuetify-overlays';
Vue.use(Vuetify);
Vue.use(InstantVuetifyOverlays);
Basic usage in vue class
Snackbar
https://vuetifyjs.com/en/components/snackbars
alert
this.$vsnackbar.alert('Hello');
this.$vsnackbar.alert({ message: 'Hello', timeout: 500 });
await this.$vsnackbar.alert({ message: 'Hello', timeout: 0 });
const vsnackbar = this.$vsnackbar.alert({ message: 'Hello', timeout: 0 }).vsnackbar;
vsnackbar.close();
Dialog
https://vuetifyjs.com/en/components/dialogs
open
await this.$vdialog.open({ component: TestDialog, needCard: true });
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class TestDialog extends Vue {
protected onClick() {
this.$emit('ok');
}
}
alert
this.$vdialog.alert('Hello');
this.$vdialog.alert({ title: 'Hi', message: 'Hello' });
await this.$vdialog.alert('Hello');
const vdialog = this.$vdialog.alert('Hello').vdialog;
vdialog.ok();
confirm
const result = await this.$vdialog.confirm('Hello');
console.log(result.confirm);
this.$vdialog.confirm({
message: 'Hello',
onClose: (result) => {
console.log(result.confirm);
},
});
const vdialog = this.$vdialog.confirm('Hello').vdialog;
vdialog.ok();
prompt
const result = await this.$vdialog.prompt('Hello');
if (result.confirm) {
console.log(result.text);
}
const result = await this.$vdialog.prompt({
message: 'Hello',
persistent: true,
});
console.log(result.text);
this.$vdialog.prompt({
message: 'Hello',
onClose: (result) => {
if (result.confirm) {
console.log(result.text);
}
},
});
const vdialog = this.$vdialog.prompt('Hello').vdialog;
await wait(3000);
const result = vdialog.ok();
console.log(result.text);
Progress
https://vuetifyjs.com/en/components/progress
Loading
const vdialog = await this.$vprogress.circular().vdialog;
await wait(1000);
vdialog.ok();
await this.$vprogress.circularLoading(async () => {
await wait(1000);
});
await this.$vprogress.circularLoading(async () => {
await wait(500);
}, { minTime: 1000 });
Timer
await this.$vprogress.circularTimer(1000);
Progress
await this.$vprogress.circularProgress(async (setProgress) => {
await wait(1000);
setProgress(25);
await wait(1000);
setProgress(90);
await wait(1000);
setProgress(100);
});