blessing-skin-server/resources/assets/src/scripts/modal.ts
2019-12-01 14:45:33 +08:00

52 lines
1.2 KiB
TypeScript

import $ from 'jquery'
import 'bootstrap'
import Vue from 'vue'
import Modal from '../components/Modal.vue'
export interface ModalOptions {
mode?: 'alert' | 'confirm' | 'prompt'
title?: string
text?: string
dangerousHTML?: string
input?: string
placeholder?: string
inputType?: string
validator?(value: any): string | boolean | void
type?: string
showHeader?: boolean
center?: boolean
okButtonText?: string
okButtonType?: string
cancelButtonText?: string
cancelButtonType?: string
flexFooter?: boolean
}
export interface ModalResult {
value: string
}
export function showModal(options: ModalOptions = {}): Promise<ModalResult> {
return new Promise((resolve, reject) => {
const container = document.createElement('div')
document.body.appendChild(container)
const instance = new Vue({
render: h => h(Modal, {
props: Object.assign({ center: true }, options),
on: {
confirm: resolve,
dismiss: reject,
},
}),
}).$mount(container)
$(instance.$el)
.modal('show')
.on('hidden.bs.modal', () => {
instance.$el.remove()
instance.$destroy()
})
})
}