confirm

Confirm
- 安装
- 属性
- 事件
- 插槽
- 方法
- 相关 issue
- 贡献者
- 发布日志

Confirm

demo 原始链接demo 源码编辑文档组件源码

confirm - 图1

二维码

confirm - 图2

Install

安装

局部注册

全局注册

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	—	弹窗隐藏时触发	—

插槽

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

方法

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

Issues

发布日志

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] 以插件方式显示时强制重置数据

Confirm

安装

属性

事件

插槽

方法

相关 issue

贡献者

发布日志