uniapp弹出框的使用指南

一、popup组件

uniapp中的popup组件可以用于弹出简单的提示框、操作框、菜单等。它可以通过position属性控制弹出框的位置，不同的position值会使得弹出框呈现不同的弹出形式。下面是一个简单的popup组件的使用例子：

  

<script>
	export default {
		data() {
			return {
				showPopup: false
			}
		}
	}
</script>

代码说明： - button标签绑定了一个点击事件，点击按钮可以控制显示或隐藏popup组件。 - popup组件的v-model值与data中定义的showPopup变量绑定，可以通过修改showPopup的值控制popup组件的显示或隐藏。 - popup组件的position属性设置为"bottom"，表示从底部弹出。 - popup组件中的内容可以自定义，这里是一个简单的view标签，并包含一些文字和按钮。

二、uniapp弹窗组件

除了popup组件，uniapp还提供了弹窗组件（uni-popup），可以实现更复杂的弹窗功能。弹窗组件包含了显示、关闭、位置、动画、拖曳等功能。下面是一个简单的弹窗组件的使用示例：

  

<script>
	import {UniPopup} from '@dcloudio/uni-ui';
	
	export default {
		components: {UniPopup},
		data() {
			return {
				showDialog: false
			}
		}
	}
</script>

代码说明： - button标签绑定了一个点击事件，点击按钮可以控制显示或隐藏uni-popup组件。 - uni-popup组件的v-model值与data中定义的showDialog变量绑定，可以通过修改showDialog的值控制uni-popup组件的显示或隐藏。 - uni-popup组件的position属性设置为"bottom"，表示从底部弹出。 - uni-popup组件的overlay属性设置为true，表示显示遮罩层。 - uni-popup组件的animation属性设置为pop-up，表示弹出动画效果为pop-up。 - uni-popup组件的mask-click-close属性设置为true，表示点击遮罩层可关闭uni-popup组件。 - uni-popup组件的mask-opacity属性控制遮罩层的透明度。 - uni-popup组件中的内容可以自定义，这里是一个简单的view标签，包含一些文字和按钮。 - uni-popup组件支持拖曳的功能，默认开启拖曳的方式为长按拖动或鼠标拖动。

三、uniapp弹出框组件

与uni-popup组件类似，uniapp还提供了弹出框组件uni-dialog，可以实现类似于iOS系统中弹出框的功能。uni-dialog组件包括了标题、按钮、内容、位置、大小等属性，可以自定义弹出框的样式和内容，下面是一个简单的uni-dialog组件的使用示例：

  

<script>
	import {UniDialog} from '@dcloudio/uni-ui';
	
	export default {
		components: {UniDialog},
		data() {
			return {
				showDialog: false
			}
		}
	}
</script>

代码说明： - button标签绑定了一个点击事件，点击按钮可以控制显示或隐藏uni-dialog组件。 - uni-dialog组件的v-model值与data中定义的showDialog变量绑定，可以通过修改showDialog的值控制uni-dialog组件的显示或隐藏。 - uni-dialog组件的title属性设置弹出框的标题。 - uni-dialog组件的message属性设置弹出框的内容。 - uni-dialog组件的show-confirm-button属性设置为true，表示显示确认按钮。 - uni-dialog组件的show-cancel-button属性设置为true，表示显示取消按钮。 - uni-dialog组件的confirm-button-text属性和cancel-button-text属性控制按钮的文字内容。 - uni-dialog组件的cancel-button-color属性和confirm-button-color属性设置按钮的颜色。 - uni-dialog组件还支持其他属性的设置，例如位置、大小、弹出动画等，具体参考uniapp官方文档。

四、uniapp弹出选择框

除了简单的提示框和弹出框，uniapp还提供了弹出选择框的组件——uni-actionsheet。uni-actionsheet组件可以用于选择列表、操作列表等弹出框场景。下面是一个简单的uni-actionsheet组件的使用示例：

  

<script>
	import {UniActionsheet} from '@dcloudio/uni-ui';
	
	export default {
		components: {UniActionsheet},
		data() {
			return {
				showActionSheet: false,
				actions: [
					{ name: '选项1', value: '1' },
					{ name: '选项2', value: '2' },
					{ name: '选项3', value: '3' },
					{ name: '选项4', value: '4' },
					{ name: '选项5', value: '5' }
				]
			}
		},
		methods: {
			onCancel() {
				this.showActionSheet = false;
			},
			onSelect(index) {
				console.log('选中了第' + (index + 1) + '个选项');
				this.showActionSheet = false;
			}
		}
	}
</script>

代码说明： - button标签绑定了一个点击事件，点击按钮可以控制显示或隐藏uni-actionsheet组件。 - uni-actionsheet组件的v-model值与data中定义的showActionSheet变量绑定，可以通过修改showActionSheet的值控制uni-actionsheet组件的显示或隐藏。 - uni-actionsheet组件的actions属性设置选择框的选项列表。 - uni-actionsheet组件的title属性设置选择框的标题。 - uni-actionsheet组件的cancel-text属性设置取消按钮的文字内容。 - uni-actionsheet组件的cancel-color属性设置取消按钮的颜色。 - uni-actionsheet组件支持通过select事件响应用户选择的选项。

五、uniapp弹出框做页面

上面介绍过几个简单的uniapp弹出框组件，这里我们可以使用这些弹出框组件来完成弹出框做页面的功能。下面是一个示例代码：

  

<script>
	import {UniDialog, Popup} from '@dcloudio/uni-ui';
	
	export default {
		components: {UniDialog, Popup},
		data() {
			return {
				showPage: false,
				showPopup: false
			}
		},
		methods: {
			doAsync() {
				let that = this;
				setTimeout(function() {
					that.showPage = false;
				}, 3000);
			}
		}
	}
</script>

代码说明： - button标签绑定了一个点击事件，点击按钮可以打开一个弹出框模拟页面效果。 - uni-dialog组件作为弹出框的容器，包含了一些其他组件和内容，比如image、view、popup和custom-button等。 - popup组件作为popup按钮的容器，点击popup按钮可以弹出一个弹出框。 - custom-button组件是一个自定义组件，用于替代弹出框中的按钮，并触发自定义事件。 - 通过此例子可以了解到，uniapp的弹出框组件可以组合使用，实现更复杂的应用场景。

六、uniapp弹出框添加内容

uniapp弹出框组件不仅仅可以显示简单的文字和按钮，还可以通过插入富文本内容、图片、表格等组件，实现更加丰富的弹出框内容。下面是一个简单的示例代码：