vue-element-popup
An imperative dialog based on el-dialog component in elemenet-ui@2.x
Install
NPM
$ npm install element-ui vue-element-popup
Yarn
$ yarn add element-ui vue-element-popup
Example
Register
VueVue
Invoke
App.vue
:
popup
MyComponent.vue
:
{{ txt }} Ok Cancel
Options
Support most options on el-dialog component and use camelCase style.
Special options
- content: required, to display content in dialog
- props: declared props in the content
- cache: whether to cache instance of dialog, default is true
- closeSync: triggers when the
visible
state of dialog only changes tofalse
, the order of execution is: closeSync -> close -> closed, which can take params where you invoked "this.$emit('close', param1, ...)"
el-dialog component options
- title: title of dialog
- width: width of dialog, default is '50%'
- fullscreen: whether the dialog take up full screen, default is false
- top: value for margin-top of dialog CSS, default is '15vh'
- modal: whether a mask is displayed, default is true
- lockScroll: whether scroll of body is disabled while dialog is displayed, default is true
- customClass: custom class names for dialog
- closeOnClickModal: whether the dialog can be closed by clicking the mask, default is true
- closeOnPressEscape: whether the dialog can be closed by pressing ESC, default is true
- showClose: whether to show a close button, default is true
- center: whether to align the header in center, default is false
- open: triggers when the dialog opens
- opened: triggers when the dialog opening animation ends
- close: triggers when the dialog closes, which can take params where you invoked "this.$emit('close', param1, ...)"
- closed: triggers when the dialog closing animation ends, which can take params where you invoked "this.$emit('close', param1, ...)"
Events
- close: closes dialog, you can pass params and recive it in following options closeSync、close、closed