uni-app编写微信小程序使用uni-popup搭配uni-popup-dialog组件在ios自动弹出键盘。

uni-popup-dialog 对话框

uni-popuptype属性改为 dialog,并引入对应组件即可使用对话框 ,该组件不支持单独使用

示例

html 复制代码
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="dialog">
	<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
javascript 复制代码
export default {
	methods: {
		open() {
			this.$refs.popup.open()
		},
		/**
		 * 点击取消按钮触发
		 * @param {Object} done
		 */
		close() {
			// TODO 做一些其他的事情,before-close 为true的情况下,手动执行 close 才会关闭对话框
			// ...
			this.$refs.popup.close()
		},
		/**
		 * 点击确认按钮触发
		 * @param {Object} done
		 * @param {Object} value
		 */
		confirm(value) {
			// 输入框的值
			console.log(value)
			// TODO 做一些其他的事情,手动执行 close 才会关闭对话框
			// ...
			this.$refs.popup.close()
		}
	}
}

PopupDialog Props

属性名 类型 默认值 说明
type String success 对话框标题主题,可选值: success/warn/info/error
mode String base 对话框模式,可选值:base(提示对话框)/input(可输入对话框)
title String - 对话框标题
content String - 对话框内容,base模式下生效
confirmText 1.7.4新增 String - 定义确定按钮文本
cancelText 1.7.4新增 String - 定义取消按钮文本
maxlength 1.8.6新增 Number - 限制输入框字数(当mode="input"时生效)
showClose 1.8.5新增 Boolean - 是否显示取消按钮
value String\Number - 输入框值,input模式下生效 注:1.9.0之后为双向绑定,vue2通过value,vue3通过v-model绑定
placeholder String - 输入框提示文字,input模式下生效
borderRadius String - 四周圆角值(左上、右上、右下、左下) 示例:"20px 20px 20px 20px"
before-close Boolean false 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法

PopupDialog Events

事件称名 说明 返回值
close 点击dialog取消按钮触发 -
confirm 点击dialog确定按钮触发 e={value:input模式下输入框的值}

PopupDialog Slots

名称 说明
default 自定义内容,会覆盖原有的内容显示(关键)

解决此问题的关键问题:

就在于不要使用默认的输入,要借用默认插槽进行覆盖

修改后代码如下:

html 复制代码
<uni-popup ref="newDeviceGroupRef" type="dialog">
	<uni-popup-dialog mode="input" title="新建设备组" :before-close="true" @close="dialogInputClose"
		@confirm="dialogInputConfirm">
		<view style="width: 100%;">
			<uni-easyinput type="text" v-model="inPutValue" placeholder="请输入设备组名" />
		</view>
	</uni-popup-dialog>
</uni-popup>
相关推荐
aiopencode5 分钟前
SwiftUI Introspect生产环境完全指南:为什么它是安全可靠的选择
后端·ios
AI多Agent协作实战派1 小时前
AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐
数据库·人工智能·uni-app
00后程序员张1 小时前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone
ii_best11 小时前
更新!移动端开发软件按键安卓版&手机助手v5.1.0上线!本地AI识别全面解锁,脚本开发再升级
android·人工智能·ios·按键精灵
weixin_4038101315 小时前
03-iOS免越狱无线投屏-上传图片和视频到相册
ios·新媒体运营·跨境电商·ios自动化·ios投屏·ios智能体·ios脚本
2501_9160074715 小时前
SwiftUI 声明式语法与 Xcode 预览功能详解
ide·vscode·ios·swiftui·个人开发·xcode·敏捷流程
2501_9160088918 小时前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
码云数智-大飞1 天前
iOS 卡顿排查指南:主线程阻塞与 UI 渲染优化实战
ui·ios
for_ever_love__1 天前
iOS:天气预报仿写总结
macos·ui·ios·objective-c·cocoa
weixin_403810131 天前
05-iOS免越狱无线投屏-客服类工作快捷回复
ios·新媒体运营·跨境电商·ios投屏·ios智能体·ios脚本·营销获客