Confirm

Confirm

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

confirm - 图1

二维码

confirm - 图2

Install

安装

局部注册

全局注册

  1. import { Confirm } from 'vux'
  2. export default {
  3. components: {
  4. Confirm
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Confirm } from 'vux'
  4. Vue.component('confirm', Confirm)

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

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

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

  1. import { ConfirmPlugin } from 'vux'
  2. Vue.use(ConfirmPlugin)
  1. // 显示
  2. this.$vux.confirm.show({
  3. // 组件除show外的属性
  4. onCancel : () => {
  5. console.log(this) //当前 vm
  6. },
  7. onConfirm : () => {}
  8. })
  9. // 隐藏
  10. this.$vux.confirm.hide()
  11. // prompt形式调用
  12. this.$vux.confirm.prompt('placeholder', {
  13. onCancel : () => {}
  14. onConfirm : () =>{}
  15. })
  16. // 设置输入值
  17. this.$vux.confirm.setInputValue('value') // 注意需要在 onShow 事件中执行
  18. // 获取显示状态
  19. 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-attrsobject{ "type": "text"}input 属性v2.5.7
mask-z-indexnumber string1000遮罩层 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

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 52,贡献人数 10
zzccchenrsafairylandunclayzhangzicaoSapphireKwanQiongrong 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] 以插件方式显示时强制重置数据