uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

用户不懂就问 發表於 2019-9-26 10:06:00

uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

<h3 id="一项目简介">介绍</h3>
uniapp自定义弹窗组件uniPop，基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框
支持多种动画效果、多弹窗类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭
H5/小程序/App三端效果如下，亲测多端效果兼容性一致。(后续大图均展示App端)
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926084840573-2082669304.png">
<h3>Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板</h3>
<h3 id="一项目简介">用法</h3>
◆ 弹窗uniPop.vue组件两种引入方式
1、在main.js里引入全局组件
import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop) 
2、在相应页面引入组件
<div class="cnblogs_code">
<pre>import uniPop from './components/uniPop/uniPop.vue'
export default {
data() {
 return {
 ...
 }
},
components:{
 uniPop
},
...
}</pre>
</div>
<div class="cnblogs_code">
<pre><template>
<view class="container">
 ...

 
 <uni-pop ref="uniPop"></uni-pop>
</view>
</template></pre>
</div>
<ul>
<li>msg信息框效果</li>
</ul>
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926092147970-538855135.png"> <img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926092554457-1108266133.png">
<div class="cnblogs_code">
<pre>this.$refs.uniPop.show({
content: 'msg消息提示框（5s后窗口关闭）',
shade: true,
shadeClose: false,
time: 5,
anim: 'fadeIn',
})</pre>
</div>
<ul>
<li>toast弱提示信息 - 支持success / info / error / loading四种图标</li>
</ul>
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926092528306-1471511047.png"> <img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926092540699-1686708720.png">
<div class="cnblogs_code">
<pre>this.$refs.uniPop.show({
skin: 'toast',
content: 'loading',
icon: 'loading', //success | info | error | loading
shade: false,
time: 3
})</pre>
</div>
<ul>
<li>ios弹窗效果</li>
</ul>
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093147580-1705538358.png"> <img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093202812-1406939948.png">
<div class="cnblogs_code">
<pre>let uniPop = this.$refs.uniPop
uniPop.show({
skin: 'ios',
title: '开启新邮件提醒',
content: '为了保证新邮件能及时收到提醒，请前往系统 [设置] - [电池] 中关闭应用锁屏清理。',
shadeClose: false,

btns: [
 {
 text: '取消',
 style: 'color: #2a83f2',
 onTap() {
 uniPop.close();
 }
 },
 {
 text: '前往设置',
 style: 'color: #2a83f2',
 onTap() {
 console.log('您点击了前往设置！');
 }
 }
]
})</pre>
</div>
调用方式如上，只是传入参数不一样，下面就不一一展示了
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093957442-808468303.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093529137-1359301310.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093553037-1732632964.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093639103-1504532520.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093758507-1833922594.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093810516-777027816.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093830433-2038338235.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093840526-1677307590.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093850474-1500122728.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201909/1289798-20190926093923883-283410710.png">
◆ uniapp自定义模板template
<div class="cnblogs_code">
<pre> /**
* @tpl uni-app自定义弹窗组件 - uniPop.vue
* @author andy by 2019-09-20
* @about Q：282310962wx：xy190310
*/

<template>
<view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls">
 <view class="unipop__ui_panel">
 <view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view>
 <view class="unipop__ui_main">
 <view class="unipop__ui_child" :style="opts.style">
 
 <view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view>
 
 <view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle">
 {{opts.content}}
 </view>
 <view v-if="opts.btns" class="unipop__ui_btns">
 <text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text>
 </view>
 </view>
 
 <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view>
 </view>
 </view>
</view>
</template></pre>
</div>
◆ 默认参数配置
<div class="cnblogs_code">
<pre>data() {
return {
 defaultOptions: {
 isVisible: false, //是否显示弹窗

 title: '', //标题
 content: '', //内容
 contentStyle: '', //内容样式
 style: null, //自定义弹窗样式
 skin: '', //弹窗风格
 icon: '', //弹窗图标
 xclose: false, //自定义关闭按钮

 shade: true, //遮罩层
 shadeClose: true, //点击遮罩关闭
 opacity: '', //遮罩透明度
 time: 0, //自动关闭秒数
 end: null, //销毁弹窗回调函数

 anim: 'scaleIn', //弹窗动画scaleIn(默认) | fadeIn | shake | top | right | bottom | left
 position: '', //弹窗位置top | right | bottom | left

 btns: null, //弹窗按钮
 },
 opts: {},
 timer: null
}
},</pre>
</div>
◆ 通过Object.assign函数进行参数合并处理
<div class="cnblogs_code">
<pre>methods: {
// 显示弹窗事件（处理传参）
 show(args) {
 this.opts = Object.assign({}, this.defaultOptions, args, {isVisible: true})
 // console.log(this.opts)

 // 自动关闭
 if(this.opts.time) {
 this.timer = setTimeout(() => {
 this.close()
 }, this.opts.time * 1000)
 }
},
...
}</pre>
</div>
好了，uni-app自定义弹窗组件介绍就到这里，希望能喜欢😀😀~~
◆ 最后附上几个最新原创实战项目案例
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城
<img src="https://img2024.cnblogs.com/blog/1289798/202410/1289798-20241003104251361-1962003132.jpg">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/11589149.html

頁: [1]

琼殿技术论坛's Archiver

uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果