Confirm
Install

安装

建议参照例子使用 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 支持

API

属性

名字类型默认值说明版本要求
valuebooleanfalse是否显示,使用v-model绑定--
show-inputbooleanfalse是否显示输入框,如果为true,slot会失效v2.5.0
placeholderstring输入框的提示(仅在showInput为true的情况下有效)v2.5.0
themestringios弹窗风格,可以是ios或android--
hide-on-blurbooleanfalse是否在点击遮罩时自动关闭弹窗--
titlestring弹窗标题--
contentstring弹窗内容,作为slot默认内容,可以是html片段,如果使用slot该字段会失效--
confirm-textstring确认(confirm)确认按钮的显示文字--
cancel-textstring取消(cancel)取消按钮的显示文字--
mask-transitionstringvux-fade遮罩动画--
dialog-transitionstringvux-dialog弹窗动画--
close-on-confirmbooleantrue是否在点击确认按钮时自动关闭v2.5.0
input-attrsobjectinput 属性v2.5.7
mask-z-indexnumber
string
1000遮罩层 z-index 值v2.6.4
show-cancel-buttonbooleantrue是否显示取消按钮v2.9.2
show-confirm-buttonbooleantrue是否显示确定按钮v2.9.2

事件

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

插槽

名字说明版本要求
默认插槽弹窗主体内容--

方法

名字参数说明版本要求
setInputValue(value)设置输入值,当 show-input 为 true 时有效v2.5.5


贡献者

贡献者

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

airylandunclayzhangzicaoSapphireKwanQiongrong JiangFisher光君

Changelog

发布日志

  • v2.9.2 [feature] 支持 prop: showCancelButton showConfirmButton #2795
  • v2.9.1 [feature] 添加 isVisible 获取当前显示状态 #2704
  • v2.9.0 [fix] 修复 inputAttrs 无默认值导致的报错 #2618
  • v2.9.0 [fix] 修复输入框获取焦点后又失去焦点 #2610
  • v2.8.0 [fix] 修复输入框难以移动光标
  • v2.7.3 [fix] 修复输入框难以获取 focus 的问题(感谢 @Sapphire2k)
  • v2.6.5 [enhance] 修复快速点击按钮时触发多次的问题 #2048
  • v2.6.4 [feature] 支持属性 mask-z-index 设置遮罩 z-index
  • v2.5.8 [feature] 插件支持 setInputValue 方法 #1846
  • v2.5.7 [feature] 支持 prop:input-attrs 设置额外属性 #1799
  • v2.5.5 [feature] 支持方法 setInputValue 设置输入值 #1746
  • v2.5.0 [feature] 支持 prop:close-on-confirm
  • v2.5.0 [feature] 支持 prop:show-input
  • v2.1.1-rc.11 [fix] 修复插件代码里的值和事件监听器
  • v2.1.1-rc.11 [fix] 以插件方式显示时强制重置数据