This component can be imported as plugin:
When importing it as plugin, the usage is different from it in template. Please use little camel-case such as buttonText instead of button-text.
import { AlertPlugin } from 'vux'
Vue.use(AlertPlugin)
// or the way of umd
// import built js file
Vue.use(vuxAlertPlugin)
// show
this.$vux.alert.show({
title: 'Vux is Cool',
content: 'Do you agree?',
onShow () {
console.log('Plugin: I\'m showing')
},
onHide () {
console.log('Plugin: I\'m hiding')
}
})
// hide
this.$vux.alert.hide()
API
Props
| name | type | default | description | required version |
| value | boolean | false | visibility of the component, use v-model for binding | -- |
| title | string | title | -- | |
| content | string | alert content, and will be replaced if using slot:default | v2.2.0 | |
| button-text | string | ok(确定) | button text | -- |
| hide-on-blur | boolean | false | if closing dialog when clicking on mask | -- |
| mask-transition | string | vux-fade | mask transition | -- |
| dialog-transition | string | vux-dialog | dialog transition | -- |
| mask-z-index | number string | 1000 | zIndex of mask | v2.6.4 |
Events
| name | params | description | required version |
| @on-show | -- | emits when dialog shows | -- |
| @on-hide | -- | emits when dialog is closed | -- |
Slots
| name | description | required version |
| default | dialog content | -- |
Contributors
Contributors
Total commits quantity: 29，Total contributors quantity: 3
airylandFisherLin SenChangelog
Releases
- v2.9.1 [feature] add isVisible function for AlertPlugin #2704
- v2.7.2 [feature] now we can use Alert as a module (import { AlertModule } from 'vux') #2173
- v2.6.4 [feature] support prop:mask-z-index
- v2.5.5 [feature] Support hideOnBlur #1742
- v2.2.0 [feature] Add prop:content
- v2.1.1-rc.11 [enhance] Reset props data when used as plugin
- v2.1.1-rc.9 [fix] Fix onHide callback issue #1023 @jsonviewer
- v2.0.0 [change] use `v-model` instead of `:show.sync`
- v2.0.0 [todo] fix animation