Confirm 组件使用教程

安装

import { Confirm } from 'vux'

export default {
  components: {
    Confirm
  }
}

// 在入口文件全局引入

import Vue from 'vue'
import { Confirm } from 'vux'

Vue.component('confirm', Confirm)

建议参照例子使用 v-transfer-dom 将弹窗插入 body 节点下，避免组件非 body 子节点导致的各种问题。

该组件支持以plugin形式调用：

以插件形式调用时，和template中使用不同，属性名请使用小驼峰式，比如confirmText而不是confirm-text。

import  { ConfirmPlugin } from 'vux'
Vue.use(ConfirmPlugin)

// 显示
const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
this.$vux.confirm.show({
  // 组件除show外的属性
  onCancel () {
    console.log(this) // 非当前 vm
    console.log(_this) // 当前 vm
  },
  onConfirm () {}
})

// 隐藏
this.$vux.confirm.hide()

// prompt形式调用
this.$vux.confirm.prompt('placeholder', {
  onCancel () {}
  onConfirm () {}
})

// 设置输入值
this.$vux.confirm.setInputValue('value') // 注意需要在 onShow 事件中执行

// 获取显示状态
this.$vux.confirm.isVisible() // v2.9.1 支持

属性

事件

插槽

方法