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

uni-popup-dialog 对话框

将 uni-popup 的type属性改为 dialog，并引入对应组件即可使用对话框 ，该组件不支持单独使用

示例

<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>

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	自定义内容，会覆盖原有的内容显示（关键)

解决此问题的关键问题：
就在于不要使用默认的输入，要借用默认插槽进行覆盖

修改后代码如下：

<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>

原文地址：https://blog.csdn.net/qq_44848480/article/details/145129437

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！