uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消

文章介绍了如何在Vue项目中使用uniapp的modal功能,展示一个带有确定和取消按钮的模态弹窗,并在按钮点击时触发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考文档:
https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。

uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});

在这里插入图片描述
test.vue

<template>
	<button @click.stop="isLeave()">离厂解绑</button>
</template>
<script>
	export default {
		data() {
			return {};
		},
		onLoad() {},
		methods: {
			isLeave(id) {
				uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
	}
</script>
<style>

</style>


效果:点击按钮的时候,
会弹出一个提示框
在这里插入图片描述

<think>嗯,用户正在研究如何在uni-app中封装自定义模态框组件,并且提供了两个站内引用作为背景。第一个引用提到需要在接口401时触发全局模态框,第二个引用展示了一个加载组件的封装结构。看来用户的核心需求是获得一个可复用的模态框组件代码示例。用户可能正在开发需要统一UI风格的uni-app应用,内置的uni.showModal无法满足设计需求。从技术诉求看,用户需要知道三件事:组件基本结构如何搭建、如何实现全局调用、如何适配不同触发场景(如401错误)。深层需求可能是想建立自己的UI组件库。对比用户提供的加载组件代码,模态框结构会更复杂,需要处理标题、内容、按钮组等元素。全局调用机制类似,但交互逻辑更丰富。考虑到用户引用中强调“自定义能力有限”,我应该在示例中重点展示高度可定制部分,比如支持传入按钮数量、自定义事件绑定等。组件封装的关键点在于:1)模板结构要预留插槽样式钩子2)使用vue单文件组件规范3)暴露show/hide方法4)处理遮罩层交互。对于401这种特定场景,还需要在拦截器中挂载组件实例。全局注册方式用Vue.prototype最便捷,但要注意避免污染全局对象。在写示例代码时,要特别注意uni-app的环境约束,比如不能使用DOM操作,样式要兼容多端。按钮事件用Promise处理会比较现代,但也要提供回调函数选项兼容旧项目。动画效果推荐用uni.createAnimation,比直接写CSS动画更稳定。用户之前可能已经封装过加载组件,所以这次可以沿用相似的架构模式。最后补上应用场景说明常见问题,帮助用户避开实际开发中的坑。尤其要提醒小程序端的样式隔离问题,这是uni-app多端开发最容易踩的雷区。</think> 下面是在uni-app中封装全局自定义模态框组件的完整实现方案,包含示例代码关键实现逻辑: ### 1. 组件实现(`custom-modal.vue`) ```vue <template> <view v-if="visible" class="modal-mask" @tap="closeOnMask && hide()"> <view class="modal-container" @tap.stop> <!-- 标题区 --> <view v-if="title" class="modal-header">{{ title }}</view> <!-- 内容区(支持插槽) --> <view class="modal-body"> <slot>{{ content }}</slot> </view> <!-- 按钮--> <view class="modal-footer"> <view v-for="(btn, index) in buttons" :key="index" :class="['modal-btn', btn.className || '']" :style="{ color: btn.color || '#606266' }" @tap="handleClick(btn)"> {{ btn.text }} </view> </view> </view> </view> </template> <script> export default { props: { title: String, content: String, buttons: { // 按钮配置 [{text: '确定', color: 'red', handler: Function}] type: Array, default: () => [{ text: '确定' }] }, closeOnMask: { // 点击遮罩关闭 type: Boolean, default: true } }, data() { return { visible: false }; }, methods: { show() { this.visible = true; }, hide() { this.visible = false; }, handleClick(btn) { if (typeof btn.handler === 'function') { const shouldClose = btn.handler() !== false; shouldClose && this.hide(); } else { this.hide(); } } } }; </script> <style scoped> .modal-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center; } .modal-container { width: 80%; background-color: #fff; border-radius: 12rpx; overflow: hidden; } .modal-header { padding: 30rpx; font-size: 34rpx; font-weight: bold; text-align: center; border-bottom: 1px solid #eee; } .modal-body { padding: 40rpx 30rpx; font-size: 30rpx; line-height: 1.5; } .modal-footer { display: flex; border-top: 1px solid #eee; } .modal-btn { flex: 1; text-align: center; padding: 25rpx 0; font-size: 32rpx; } .modal-btn + .modal-btn { border-left: 1px solid #eee; } </style> ``` ### 2. 全局注册(`main.js`) ```javascript import Vue from 'vue' import CustomModal from '@/components/custom-modal.vue' // 挂载全局方法 Vue.prototype.$modal = { show(options) { // 动态创建组件实例 const Instance = Vue.extend(CustomModal); const vm = new Instance().$mount(document.createElement('div')); document.body.appendChild(vm.$el); // 合并配置参数 if (typeof options === 'string') options = { content: options }; Object.assign(vm, options); // 显示模态框 vm.show(); // 返回关闭方法 return () => { vm.hide(); setTimeout(() => document.body.removeChild(vm.$el), 300); }; } } ``` ### 3. 全局调用(401拦截示例) ```javascript // 在接口请求拦截器中 uni.addInterceptor('request', { fail: (err) => { if (err.statusCode === 401) { const closeModal = this.$modal.show({ title: '会话过期', content: '登录信息已失效,请重新登录', buttons: [ { text: '取消', handler: () => console.log('取消操作') }, { text: '去登录', color: '#07C160', handler: () => uni.navigateTo({ url: '/pages/login' }) } ] }); // 3秒后自动关闭 setTimeout(closeModal, 3000); } } }); ``` ### 4. 组件特性说明 1. **灵活按钮配置**:支持自定义按钮文字/颜色/事件 ```js buttons: [ { text: '取消', color: '#999' }, { text: '确定', color: 'blue', handler: () => {...} } ] ``` 2. **双内容模式**: ```vue <!-- 默认文本 --> <custom-modal content="提示内容"/> <!-- 复杂内容使用插槽 --> <custom-modal> <image src=".." /> <text>自定义内容</text> </custom-modal> ``` 3. **遮罩控制**:通过`closeOnMask`属性控制点击背景是否关闭 4. **动画扩展建议**: ```css .modal-container { transform: scale(0.9); transition: all 0.3s ease; } .modal-container.active { transform: scale(1); } ``` ### 5. 使用示例 ```javascript // 简单调用 this.$modal.show("操作成功!") // 完整调用 this.$modal.show({ title: '删除确认', content: '确定删除该数据?', buttons: [ { text: '取消' }, { text: '删除', color: 'red', handler: () => { console.log('执行删除操作'); return true; // 自动关闭 } } ] }) ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值