uni-app 输入对话框-马育民老师

# showModal

内置方式，功能有限，比如：输入内容不符合要求时，也会关闭当前窗口

不满足需求，用下面的 `<uni-popup>` 实现方式

官方文档：
https://uniapp.dcloud.net.cn/api/ui/prompt.html#showmodal

```
uni.showModal({
	title:"文件夹名",
	editable:true,
	confirmText: "确定",
	cancelText: "取消",
	success: function (res) {
		if (res.confirm) {
			saveNoteType
		}
	}
})
```

# popup实现方式

可以自定义窗口内容

### 例子

**关键：**

- `createFolderDialog` 后面不能有 `()`，否则无法将输入内容传入该函数

- `:before-close="true"`：必须通过代码关闭窗口。如果设置为 `false` 或不设置此项，点击按钮会自动关闭，导致 **校验输入内容** 失败后也会自动关闭窗口

- `@close="closeFolderDialog"`：由于设置了 `:before-close="true"`，所以必须给 【关闭按钮】 增加 **点击事件**

```

<uni-popup ref="createFolderDialog" type="dialog">
	<uni-popup-dialog  mode="input" title="文件夹名"
		@confirm="doCreateFolderDialog" 
		@close="closeFolderDialog"
		:before-close="true"></uni-popup-dialog>
</uni-popup>
```

显示对话框：

```
this.$refs.createFolderDialog.open()
```

【关闭】按钮事件：

```
closeFolderDialog(){
	this.$refs.createFolderDialog.close()
},

```

【确定】按钮事件：

```
// 形参 val 就是输入的内容
doCreateFolderDialog(val){
	console.log("val：",val)
	if(this.val === ""){
		uni.showToast({
			icon: 'none',
			title: "请输入文件夹名"
		})
		return
	}
	// 必须手动关闭窗口
	this.$refs.createFolderDialog.close()
},

```

原文出处：https://malaoshi.top/show_1IX75yd8K8iF.html