该组件支持以plugin
形式调用:
以插件形式调用时,和template
中使用不同,属性名请使用小驼峰式
,比如buttonText
而不是button-text
。
在 ViewBox
或者 overflow-scrolling:touch
的容器中使用时,请使用 prop:transfer-dom
来解决其引起的 z-index
失效问题。详细参考 demo。
import { AlertPlugin } from 'vux'
Vue.use(AlertPlugin)
// 或者umd方式
// 引入构建的js文件
Vue.use(vuxAlertPlugin)
// 显示
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')
}
})
// 隐藏
this.$vux.alert.hide()
// 获取显示状态
this.$vux.alert.isVisible() // v2.9.1 支持
如果你想实现在vue-router
的beforeEach
或者afterEach
的 hook 里关闭,可以使用 Vue.$vux.alert.hide()
该组件在 v2.7.2 以上支持单独调用,方法和插件使用一致。
import { AlertModule } from 'vux'
AlertModule.show({
title: 'VUX is Cool',
content: this.$t('Do you agree?'),
onShow () {
console.log('Module: I\'m showing')
},
onHide () {
console.log('Module: I\'m hiding now')
}
})
API
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
value | boolean | false | 是否显示, 使用 v-model 绑定变量 | -- |
title | string | 弹窗标题 | -- | |
content | string | 提示内容,作为 slot:default 的默认内容,如果使用 slot:default, 将会失效 | v2.2.0 | |
button-text | string | ok(确定) | 按钮文字 | -- |
hide-on-blur | boolean | false | 是否在点击遮罩时自动关闭弹窗 | -- |
mask-transition | string | vux-fade | 遮罩动画 | -- |
dialog-transition | string | vux-dialog | 弹窗主体动画 | -- |
mask-z-index | number string | 1000 | 遮罩层 z-index 值 | v2.6.4 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-show | -- | 弹窗显示时触发 | -- |
@on-hide | -- | 弹窗关闭时触发 | -- |
插槽
名字 | 说明 | 版本要求 |
默认插槽 | 提示内容 | -- |
Changelog
发布日志
- v2.9.1 [feature] 添加 isVisible 获取当前显示状态 #2704
- v2.7.2 [feature] 支持作为模块直接调用 (import { AlertModule } from 'vux') #2173
- v2.6.4 [feature] 支持属性 mask-z-index 设置遮罩 z-index
- v2.5.5 [feature] 支持 hideOnBlur #1742
- v2.2.0 [feature] 添加属性 prop:content
- v2.1.1-rc.11 [enhance] 作为插件使用时,每次都重置属性值
- v2.1.1-rc.9 [fix] 修正 onHide 回调被错误调用 #1023 @jsonviewer
- v2.0.0 [change] 使用 `v-model` 而不是`:show.sync`进行显示属性绑定
- v2.0.0 [todo] 修复动画