一、popup组件
uniapp中的popup组件可以用于弹出简单的提示框、操作框、菜单等。它可以通过position属性控制弹出框的位置，不同的position值会使得弹出框呈现不同的弹出形式。下面是一个简单的popup组件的使用例子：
这是一个从底部弹出的popup组件
export default { data() { return { showPopup: false } } }
代码说明：
– button标签绑定了一个点击事件，点击按钮可以控制显示或隐藏popup组件。
– popup组件的v-model值与data中定义的showPopup变量绑定，可以通过修改showPopup的值控制popup组件的显示或隐藏。
– popup组件的position属性设置为”bottom”，表示从底部弹出。
– popup组件中的内容可以自定义，这里是一个简单的view标签，并包含一些文字和按钮。
二、uniapp弹窗组件
除了popup组件，uniapp还提供了弹窗组件（uni-popup），可以实现更复杂的弹窗功能。弹窗组件包含了显示、关闭、位置、动画、拖曳等功能。下面是一个简单的弹窗组件的使用示例：
这是一个从底部弹出的uni-popup组件
这是一个支持拖曳的uni-popup组件
import {UniPopup} from '@dcloudio/uni-ui'; export default { components: {UniPopup}, data() { return { showDialog: false } } }
代码说明：
– 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组件的使用示例：
import {UniDialog} from '@dcloudio/uni-ui';
export default {
components: {UniDialog},
data() {
return {
showDialog: false
}
}
}
代码说明：
– 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组件的使用示例：
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;
}
}
}
代码说明：
– 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弹出框组件，这里我们可以使用这些弹出框组件来完成弹出框做页面的功能。下面是一个示例代码：
这是一个容器，可以放置任何组件。
这是一个透明的uni-popup组件，点击即可关闭。
这是一个自定义的button组件，点击可触发异步事件。
这是一个从右侧弹出的弹出框内容
这里可以放置一些其他的组件
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); } } }
代码说明：
– button标签绑定了一个点击事件，点击按钮可以打开一个弹出框模拟页面效果。
– uni-dialog组件作为弹出框的容器，包含了一些其他组件和内容，比如image、view、popup和custom-button等。
– popup组件作为popup按钮的容器，点击popup按钮可以弹出一个弹出框。
– custom-button组件是一个自定义组件，用于替代弹出框中的按钮，并触发自定义事件。
– 通过此例子可以了解到，uniapp的弹出框组件可以组合使用，实现更复杂的应用场景。
六、uniapp弹出框添加内容
uniapp弹出框组件不仅仅可以显示简单的文字和按钮，还可以通过插入富文本内容、图片、表格等组件，实现更加丰富的弹出框内容。下面是一个简单的示例代码：
这是一个uni-dialog组件
{{ item.title }}
{{ item.content }}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/304188.html
微信扫一扫 
支付宝扫一扫 