弹窗提示 - alert - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { Alert } from 'vux'
export default {
  components: {
    Alert
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Alert } from 'vux'
Vue.component('alert', Alert)

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