uniapp 中uni.showModal添加输入框
在 uni-app 中,可以使用uni.showModal
方法展示一个模态弹窗,并在其中添加输入框。以下是一个示例代码:
uni.showModal({
title: '输入信息',
content: '请输入你的内容:',
editable: true,
confirmText: '确定',
cancelText: '取消',
success: function (res) {
if (res.confirm) {
console.log('用户输入的内容:', res.content);
} else if (res.cancel) {
console.log('用户取消了输入');
}
}
});
在上述代码中,通过设置editable
为true
,使弹窗可以输入内容。当用户点击确定按钮时,可以在success
回调函数中获取用户输入的内容。如果用户点击取消按钮,则可以进行相应的处理。
以下是对上述代码的详细解释:
title
属性用于设置弹窗的标题。content
属性用于设置弹窗的提示内容。editable
属性设置为true
,表示弹窗中的内容可编辑,即添加了输入框。confirmText
和cancelText
分别用于设置确定按钮和取消按钮的文本。- 在
success
回调函数中,根据用户的操作(确定或取消)进行相应的处理。如果用户点击确定按钮,res.confirm
为true
,可以通过res.content
获取用户输入的内容;如果用户点击取消按钮,res.cancel
为true
。
通过这种方式,可以在 uni-app 中使用uni.showModal
方法添加输入框并获取用户输入的内容。