介绍
uniapp自定义弹窗组件uniPop，基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框
支持多种动画效果、多弹窗类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭
H5/小程序/App三端效果如下，亲测多端效果兼容性一致。(后续大图均展示App端)
用法
◆ 弹窗uniPop.vue组件两种引入方式
1、在main.js里引入全局组件
import uniPop from './components/uniPop/uniPop.vue' Vue.component('uni-pop', uniPop)2、在相应页面引入组件
复制代码
import uniPop from './components/uniPop/uniPop.vue' export default { data() { return { ... } }, components:{ uniPop }, ... }<template> <view class="container"> ... <!-- 弹窗模板 --> <uni-pop ref="uniPop"></uni-pop> </view> </template>msg信息框效果
this.$refs.uniPop.show({ content: 'msg消息提示框（5s后窗口关闭）', shade: true, shadeClose: false, time: 5, anim: 'fadeIn', })this.$refs.uniPop.show({ skin: 'toast', content: 'loading', icon: 'loading', //success | info | error | loading shade: false, time: 3 })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('您点击了前往设置！'); } } ] })调用方式如上，只是传入参数不一样，下面就不一 一展示了
◆ uniapp自定义模板template
/** * @tpl uni-app自定义弹窗组件 - uniPop.vue * @author andy by 2019-09-20 * @about Q：282310962 wx：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> <!-- xclose --> <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view> </view> </view> </view> </template>◆ 默认参数配置
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 } },◆ 通过Object.assign函数进行参数合并处理
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) } }, ... }好了，uni-app自定义弹窗组件介绍就到这里，希望能喜欢????????~~