Alert 组件使用教程

安装

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')
  }
})

属性

事件

插槽