Alert
Install

安装

该组件支持以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-routerbeforeEach或者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

属性

名字类型默认值说明版本要求
valuebooleanfalse是否显示, 使用 v-model 绑定变量--
titlestring弹窗标题--
contentstring提示内容,作为 slot:default 的默认内容,如果使用 slot:default, 将会失效v2.2.0
button-textstringok(确定)按钮文字--
hide-on-blurbooleanfalse是否在点击遮罩时自动关闭弹窗--
mask-transitionstringvux-fade遮罩动画--
dialog-transitionstringvux-dialog弹窗主体动画--
mask-z-indexnumber
string
1000遮罩层 z-index 值v2.6.4

事件

名字参数说明版本要求
@on-show--弹窗显示时触发--
@on-hide--弹窗关闭时触发--

插槽

名字说明版本要求
默认插槽提示内容--


贡献者

贡献者

该组件(包含文档)迭代次数 29,贡献人数 3

airylandFisherLin Sen

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] 修复动画