当前位置：首页 > news >正文

uniAPP安装 uni-popup，弹窗提示

news 2025/9/16 5:55:24

在使用前，需要通过 npm 安装 uni-popup：

npm install @dcloudio/uni-ui

在这里插入图片描述
在main.js里全局注册

import Vue from 'vue'
import App from './App'// 导入 uni-popup 组件
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import uniPopupMessage from '@dcloudio/uni-ui/lib/uni-popup-message/uni-popup-message.vue'
import uniPopupDialog from '@dcloudio/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue'// 全局注册 uni-popup 组件
Vue.component('uni-popup', uniPopup)
Vue.component('uni-popup-message', uniPopupMessage)
Vue.component('uni-popup-dialog', uniPopupDialog)// 您的其他代码
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})
app.$mount()

页面内容

<template><view class="container"><!-- 消息提示弹窗 --><uni-popup ref="messagePopup" type="message"><uni-popup-message type="success" message="操作成功" :duration="2000"></uni-popup-message></uni-popup><!-- 对话框弹窗 --><uni-popup ref="dialogPopup" type="dialog"><uni-popup-dialogtype="info"title="提示"content="确定要执行此操作吗？":duration="0"@confirm="handleConfirm"@close="handleClose"></uni-popup-dialog></uni-popup><!-- 底部弹窗 --><uni-popup ref="bottomPopup" type="bottom"><view class="popup-content"><text class="popup-title">底部弹窗</text><text class="popup-desc">这是一个从底部弹出的窗口</text><button class="popup-btn" @click="closeBottomPopup">关闭</button></view></uni-popup><!-- 操作按钮 --><view class="btn-group"><button class="btn" @click="showMessage">消息提示</button><button class="btn" @click="showDialog">对话框</button><button class="btn" @click="showBottomPopup">底部弹窗</button></view></view>
</template><script>
// 引入 uni-popup 组件
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'export default {components: {uniPopup,uniPopupMessage,uniPopupDialog},methods: {// 显示消息提示showMessage() {this.$refs.messagePopup.open()},// 显示对话框showDialog() {this.$refs.dialogPopup.open()},// 显示底部弹窗showBottomPopup() {this.$refs.bottomPopup.open()},// 关闭底部弹窗closeBottomPopup() {this.$refs.bottomPopup.close()},// 对话框确认事件handleConfirm() {console.log('点击确认')this.$refs.dialogPopup.close()},// 对话框关闭事件handleClose() {console.log('点击关闭')this.$refs.dialogPopup.close()}}
}
</script><style scoped>
.container {padding: 30rpx;display: flex;flex-direction: column;align-items: center;
}.btn-group {width: 100%;margin-top: 100rpx;
}.btn {width: 100%;height: 80rpx;line-height: 80rpx;background-color: #007AFF;color: white;border-radius: 10rpx;margin-bottom: 30rpx;font-size: 32rpx;
}.popup-content {padding: 40rpx;background-color: white;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;display: flex;flex-direction: column;align-items: center;
}.popup-title {font-size: 36rpx;font-weight: bold;margin-bottom: 20rpx;
}.popup-desc {font-size: 28rpx;color: #666;margin-bottom: 40rpx;text-align: center;
}.popup-btn {width: 100%;height: 80rpx;line-height: 80rpx;background-color: #007AFF;color: white;border-radius: 10rpx;
}
</style>