hae
Version:
Mobile web UI based on Vux
232 lines (221 loc) • 6.55 kB
YAML
category:
en: Feedback
zh-CN: 弹窗提示
icon: ''
tags:
en:
- dialog
- message
- confirm
zh-CN:
- 弹窗
- 消息提示
- 确认
extra: |
::: tip
建议参照例子使用 `v-transfer-dom` 将弹窗插入 `body` 节点下,避免组件非 body 子节点导致的各种问题。
:::
该组件支持以`plugin`形式调用:
::: warning
以插件形式调用时,和`template`中使用不同,属性名请使用`小驼峰式`,比如`confirmText`而不是`confirm-text`。
:::
``` js
import { ConfirmPlugin } from 'vux'
Vue.use(ConfirmPlugin)
```
``` js
// 显示
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 支持
```
props:
value:
type: Boolean
default: false
en: visibility of the component
zh-CN: 是否显示,使用`v-model`绑定
show-input:
version: v2.5.0
type: Boolean
default: false
en: whether show input or not. If true, slot will not work
zh-CN: 是否显示输入框,如果为true,slot会失效
placeholder:
version: v2.5.0
type: String
default: ''
en: placeholder of prompt, valid when show-input is true
zh-CN: 输入框的提示(仅在showInput为true的情况下有效)
theme:
type: String
default: ios
en: dialog's style, can be ios or android
zh-CN: 弹窗风格,可以是ios或android
enum:
- ios
- android
hide-on-blur:
type: Boolean
default: false
en: if closing dialog when clicking on mask
zh-CN: 是否在点击遮罩时自动关闭弹窗
title:
en: dialog title
zh-CN: 弹窗标题
content:
type: String
en: dialog content, can use html. Invalid when using slot
zh-CN: 弹窗内容,作为slot默认内容,可以是html片段,如果使用slot该字段会失效
confirm-text:
default: 确认(confirm)
en: text of confirm button
zh-CN: 确认按钮的显示文字
cancel-text:
default: 取消(cancel)
en: text of cancel button
zh-CN: 取消按钮的显示文字
mask-transition:
default: 'vux-fade'
en: mask's transition
zh-CN: 遮罩动画
dialog-transition:
default: 'vux-dialog'
en: dialog's transition
zh-CN: 弹窗动画
close-on-confirm:
version: v2.5.0
type: Boolean
default: true
en: whether close automatically when confirm button is clicked
zh-CN: 是否在点击确认按钮时自动关闭
input-attrs:
version: v2.5.7
type: Object
default: {type: 'text'}
en: input attributes
zh-CN: input 属性
mask-z-index:
version: v2.6.4
type: Number, String
default: 1000
en: zIndex of mask
zh-CN: 遮罩层 z-index 值
show-cancel-button:
version: v2.9.2
type: Boolean
default: true
en: if show cancel button
zh-CN: 是否显示取消按钮
show-confirm-button:
version: v2.9.2
type: Boolean
default: true
en: if show confirm button
zh-CN: 是否显示确定按钮
slots:
default:
en: body content of the dialog
zh-CN: 弹窗主体内容
events:
on-cancel:
en: triggers when the cancel button is clicked
zh-CN: 点击取消按钮时触发
on-confirm:
params: '(value)'
en: triggers when the confirm button is clicked
zh-CN: 点击确定按钮时触发, 参数为prompt中输入的值
on-show:
en: triggers when the dialog shows
zh-CN: 弹窗出现时触发
on-hide:
en: triggers when the dialog hides
zh-CN: 弹窗隐藏时触发
methods:
setInputValue:
version: v2.5.5
params: '(value)'
en: set input value when show-input is true
zh-CN: 设置输入值,当 show-input 为 true 时有效
changes:
v2.9.2:
en:
- '[feature] Support prop: showCancelButton showConfirmButton #2795'
zh-CN:
- '[feature] 支持 prop: showCancelButton showConfirmButton #2795'
v2.9.1:
en:
- '[feature] add isVisible function for ConfirmPlugin #2704'
zh-CN:
- '[feature] 添加 isVisible 获取当前显示状态 #2704'
v2.9.0:
en:
- '[fix] fix inputAttrs issue with no-default-value #2618'
- '[fix] fix focus auto-blur issue #2610'
zh-CN:
- '[fix] 修复 inputAttrs 无默认值导致的报错 #2618'
- '[fix] 修复输入框获取焦点后又失去焦点 #2610'
v2.8.0:
en:
- '[fix] fix hard to move cursor'
zh-CN:
- '[fix] 修复输入框难以移动光标'
v2.7.3:
en:
- '[fix] fix hard to get focus on input(thanks to @Sapphire2k)'
zh-CN:
- '[fix] 修复输入框难以获取 focus 的问题(感谢 @Sapphire2k)'
v2.6.5:
en:
- '[enhance] fix click events trigger twice when clicking fast #2048'
zh-CN:
- '[enhance] 修复快速点击按钮时触发多次的问题 #2048'
v2.6.4:
en:
- '[feature] support prop:mask-z-index'
zh-CN:
- '[feature] 支持属性 mask-z-index 设置遮罩 z-index'
v2.5.8:
en:
- '[feature] Support method:setInputValue for plugin #1846'
zh-CN:
- '[feature] 插件支持 setInputValue 方法 #1846'
v2.5.7:
en:
- '[feature] Support prop:input-attrs #1799'
zh-CN:
- '[feature] 支持 prop:input-attrs 设置额外属性 #1799'
v2.5.5:
en:
- '[feature] Add method:setInputValue #1746'
zh-CN:
- '[feature] 支持方法 setInputValue 设置输入值 #1746'
v2.5.0:
en:
- '[feature] Support prop:close-on-confirm'
- '[feature] Support prop:show-input'
zh-CN:
- '[feature] 支持 prop:close-on-confirm'
- '[feature] 支持 prop:show-input'
v2.1.1-rc.11:
en:
- '[fix] Fix plugin value and event watchers'
- '[fix] Reset prop data when used as plugin'
zh-CN:
- '[fix] 修复插件代码里的值和事件监听器'
- '[fix] 以插件方式显示时强制重置数据'