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

安装

局部注册

全局注册

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)

// 显示
this.$vux.confirm.show({
  // 组件除show外的属性
  onCancel : () => {
    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 支持

API

属性

名字	类型	默认值	说明	版本要求
value	boolean	false	是否显示，使用`v-model`绑定	—
show-input	boolean	false	是否显示输入框，如果为true，slot会失效	v2.5.0
placeholder	string		输入框的提示（仅在showInput为true的情况下有效）	v2.5.0
theme	string	ios	弹窗风格，可以是ios或android	—
hide-on-blur	boolean	false	是否在点击遮罩时自动关闭弹窗	—
title	string		弹窗标题	—
content	string		弹窗内容，作为slot默认内容，可以是html片段，如果使用slot该字段会失效	—
confirm-text	string	确认(confirm)	确认按钮的显示文字	—
cancel-text	string	取消(cancel)	取消按钮的显示文字	—
mask-transition	string	vux-fade	遮罩动画	—
dialog-transition	string	vux-dialog	弹窗动画	—
close-on-confirm	boolean	true	是否在点击确认按钮时自动关闭	v2.5.0
input-attrs	object	{ "type": "text"}	input 属性	v2.5.7
mask-z-index	number string	1000	遮罩层 z-index 值	v2.6.4
show-cancel-button	boolean	true	是否显示取消按钮	v2.9.2
show-confirm-button	boolean	true	是否显示确定按钮	v2.9.2

事件

名字	参数	说明	版本要求
@on-cancel	—	点击取消按钮时触发	—
@on-confirm	(value)	点击确定按钮时触发, 参数为prompt中输入的值	—
@on-show	—	弹窗出现时触发	—
@on-hide	—	弹窗隐藏时触发	—